HTML、CSS、JavaScript を使用して表に 2 つの水平スクロールバー (上部と下部) を作成する方法

テーブルの上部と下部の両方に水平スクロールバーを作成する

大きなテーブルが表示されているブラウザ ウィンドウを超える場合、多くの場合、スクロールバーを使用することが望ましいです。表のコンテンツ全体を効率的に移動するには、上部と下部の両方に をクリックします。

純粋な HTML と CSS では、これは次のようになります。これは、上部にある 2 番目の水平スクロールバーをシミュレートすることによって実現されます。方法は次のとおりです:

1. ダミー Div を作成します:

   テーブルの上に div 要素を追加し、外観を作成するのに十分な高さでスタイルを設定します。スクロールバーの(例: 20px).

2. 垂直スクロールを無効にする:

   スクロールを制限するには、ダミー div とテーブルの親 div の両方に overflow-y: hidden を設定します。水平方向にaxis.

3. 水平スクロールを有効にする:

   オーバーフロー x: ダミー div とテーブルの親 div をスクロールして、水平スクロールを有効にします。両方

4. スクロールバーの同期:

   JavaScript を利用して、スクロール イベントにイベント リスナーをアタッチすることで、ダミー div とテーブルのスクロールを同期します。 。 1 つのスクロールバーが移動すると、他のスクロールバーもそれに応じて調整されます。

これは、テーブルの親の上にダミーの div を配置する例です。 div:

HTML:

<div class="table-wrapper">
  <div class="dummy-scrollbar"></div>
  <div class="data-table">
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.table-wrapper {
  height: 130%;
  overflow: auto;
  width: 100%;
}

.dummy-scrollbar {
  height: 20px;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.data-table {
  overflow-x: scroll;
  overflow-y: visible;
  width: 100%;
}

JavaScript:

$(".table-wrapper").scroll(function() {
  $(".dummy-scrollbar").scrollLeft($(this).scrollLeft());
});

$(".dummy-scrollbar").scroll(function() {
  $(".table-wrapper").scrollLeft($(this).scrollLeft());
});

このアプローチを実装すると、テーブルの上に 2 番目の水平スクロールバーのような錯覚を作成し、ナビゲーションとアクセシビリティを向上させることができます。