HTML、CSS、JavaScript のみを使用して大きなテーブルに二重水平スクロールバーを作成するにはどうすればよいですか?

巨大なテーブル用のデュアル水平スクロールバー

広大なテーブルに対応するために、上部と下部の両方で水平スクロールを有効にすると、ユーザーのアクセシビリティが向上します。幸いなことに、これは HTML と CSS だけで実現できます。方法は次のとおりです:

上部スクロールバーのシミュレート

水平スクロールを備えたテーブルの上に「ダミー」 div を作成します。スクロールバーが収まる程度の高さを設定します。このダミー要素は、上部に追加のスクロールバーの外観をシミュレートします。

スクロール イベントの同期

ダミー div と実際のテーブルの両方にスクロール イベント ハンドラーをアタッチします。いずれかのスクロールバーが移動すると、もう一方の要素も同期して移動する必要があります。これにより、2 つの独立した水平スクロールバーがあるかのような錯覚が生じます。

コード スニペット

HTML:

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Table Content -->
  </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、JavaScript のみを使用して大きなテーブルに二重水平スクロールバーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。