HTML과 CSS만 사용하여 테이블의 동기화된 위쪽 및 아래쪽 가로 스크롤 막대를 만드는 방법은 무엇입니까?

HTML과 CSS만 사용하여 테이블의 위쪽과 아래쪽에 가로 스크롤 막대를 만드는 방법

문제:

사용자가 큰 테이블의 상단과 하단에 가로 스크롤바를 추가하지 않고 추가하려고 합니다. 모든 JavaScript.

해결책:

CSS를 사용하여 테이블 위에 "더미" div를 생성하면 테이블 상단에 두 번째 가로 스크롤 막대를 시뮬레이션할 수 있습니다. 수평 스크롤이 가능하고 높이가 스크롤바에 딱 맞을 정도입니다. 그런 다음 "스크롤" 이벤트에 대한 이벤트 핸들러를 더미 요소와 실제 테이블에 연결하여 스크롤 막대 중 하나가 이동될 때 두 요소의 스크롤을 동기화할 수 있습니다.

코드 조각:

HTML:

<div>

CS S:

.wrapper1, .wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y:hidden;
}

.wrapper1 {height: 20px; }
.wrapper2 {height: 200px; }

.div1 {
  width:1000px;
  height: 20px;
}

.div2 {
  width:1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}

JavaScript:

$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

더미 div(.div1)는 실제 테이블 요소(.div2) 위에 두 번째 가로 스크롤 막대로 나타납니다. 두 요소의 스크롤을 동기화함으로써 사용자는 상단 또는 하단 스크롤 막대에서 표 내용을 스크롤할 수 있습니다.

위 내용은 HTML과 CSS만 사용하여 테이블의 동기화된 위쪽 및 아래쪽 가로 스크롤 막대를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!