큰 테이블에 이중 가로 스크롤 막대를 구현하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

큰 테이블에 이중 가로 스크롤 막대를 구현하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-10-29 04:37:29

원래의

883명이 탐색했습니다.

How to Implement Dual Horizontal Scrollbars for Large Tables?

큰 테이블을 위한 이중 가로 스크롤 막대

문제:

페이지에서 큰 테이블을 발견하면 사용자가 다음을 추구합니다. 탐색을 용이하게 하기 위해 상단 및 하단 수평 스크롤바를 모두 구현합니다.

HTML 및 CSS를 사용한 구현:

원하는 기능을 달성하기 위해 창의적인 접근 방식이 사용됩니다. "더미" div는 테이블 위에 위치하며 스크롤 막대를 수용할 수 있을 만큼 충분히 높게 렌더링됩니다. 더미 div와 테이블 모두 가로 스크롤 기능이 할당되어 있습니다.

코드 분석:

HTML:

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Table Content -->
  </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="js">$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

로그인 후 복사

기능: