HTML と CSS のみを使用して、テーブルの上部に 2 番目の水平スクロールバーを作成できますか?

テーブルの上部にある 2 番目の水平スクロールバーの模倣

問題:

水平スクロールバーを使用して巨大なテーブルを拡張する下部のスクロールバーが望ましいです。ただし、このスクロールバーを上部に複製することも求められます。これを純粋に HTML と CSS だけで実現することは可能ですか?

解決策:

「ダミー」 div を使用すると、要素の上に 2 番目の水平スクロールバーがシミュレートされます。このダミー div は主要素の真上に配置され、スクロールバーを収容できる十分なサイズになっています。イベント ハンドラーをダミー要素とプライマリ要素の両方にアタッチすると、どちらかのスクロールバーが使用されたときに同期が確保されます。ダミー div は、上部の 2 番目のスクロールバーの外観と機能を複製します。

実際の例:

実践的な方法については、このフィドルを調べてください。デモ。

コード:

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

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