テーブルの上部に複製の水平スクロールバーを作成するにはどうすればよいですか?

テーブルの上部と下部に水平スクロールバーを複製する

テーブルの下部に水平スクロールバーを作成することは、テーブルの一般的な要件です。幅が広すぎる。ただし、上部のスクロールバーを複製するには、より革新的なアプローチが必要です。

上部の 2 番目の水平スクロールバーをシミュレートするには、解決策として元のテーブルの上に「ダミー」 div を作成します。このダミー div には水平スクロールバーがあり、元のスクロールバーの幅を模倣するように正確にサイズ設定されています。

次に、ダミー div と元のテーブルの両方にイベント ハンドラーがアタッチされ、スクロール動作が同期されます。スクロールバーの 1 つが移動されると、配置を維持するためにもう 1 つが更新されます。この効果は、表の上部に 2 番目の水平スクロールバーが表示されることです。

次のコードは、この手法を示しています。

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 中国語 Web サイトの他の関連記事を参照してください。