테이블 상단에 중복된 가로 스크롤 막대를 어떻게 만들 수 있나요?

표 상단과 하단에 가로 스크롤 막대 복제

표 하단에 가로 스크롤 막대를 만드는 것은 테이블의 일반적인 요구 사항입니다. 폭이 너무 넓습니다. 그러나 상단에 스크롤 막대를 복제하려면 보다 혁신적인 접근 방식이 필요합니다.

상단에 두 번째 수평 스크롤 막대를 시뮬레이션하려면 원본 테이블 위에 "더미" div를 생성하는 방법이 필요합니다. 이 더미 div에는 가로 스크롤 막대가 있으며 원본 스크롤 막대의 너비를 정확하게 모방하도록 크기가 지정됩니다.

다음으로 이벤트 핸들러는 더미 div와 원본 테이블 모두에 연결되어 스크롤 동작을 동기화합니다. 스크롤 막대 중 하나를 이동할 때마다 다른 스크롤 막대도 업데이트되어 정렬을 유지합니다. 효과는 테이블 상단에 있는 두 번째 가로 스크롤 막대입니다.

다음 코드는 이 기술을 보여줍니다.

HTML:

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div></code>

CSS:

<code class="css">.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;
}</code>

JavaScript:

<code class="javascript">$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

이 기술을 통합함으로써 개발자는 HTML, CSS 및 JavaScript만 사용하여 테이블 상단에 중복 가로 스크롤 막대를 효과적으로 만들 수 있습니다.

위 내용은 테이블 상단에 중복된 가로 스크롤 막대를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!