HTML と CSS のみを使用して、重複した水平スクロールバー (上部と下部) をテーブルに追加できますか?

表の上下に水平スクロールバーを追加する方法

表が画面の範囲を超えて広がるシナリオでは、コンテンツを便利に移動するには、水平スクロールバーを組み込むことが不可欠になります。ただし、ユーザーがシームレスなスクロールのためにこのスクロールバーを表の上部と下部の両方に配置したいという共通の要件が発生します。 HTML と CSS だけでこれを実現することは可能ですか?

答えは「はい」です。デュアル水平スクロールバーをシミュレートするには、スクロールバーを収容するのに十分な高さの「ダミー」 div を実際のテーブル要素の上に配置します。その後、イベント ハンドラーがダミー div とテーブルの両方にアタッチされ、どちらかのスクロールバーのスクロールがもう一方の要素と同期するようになります。

実際のデモについては、次を参照してください。例:

HTML:

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

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;
}

JS:

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

このテクニックは効果的に錯覚を作り出します2 番目の水平スクロールバーを使用して、表の上部と下部の両方で便利で直感的なスクロール エクスペリエンスを提供します。

以上がHTML と CSS のみを使用して、重複した水平スクロールバー (上部と下部) をテーブルに追加できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。