HTML と CSS で表の上部と下部の両方に水平スクロールバーを作成する方法

HTML と CSS で表の上部と下部の両方に水平スクロールバーを配置する方法

水平スクロールバーの必要性に対処するには大きなテーブルの上部と下部の両方で、HTML と CSS だけを使用して直接実行することはできません。ただし、2 つのスクロールバーの存在をシミュレートする効果的な回避策が存在します。

その秘訣は、テーブルの上に「ダミー」 div を配置し、水平スクロールバーを収容するのに十分な高さを与えることです。このダミー div は、「2 番目」のスクロールバーとして機能します。

ダミー div と実際のテーブルの間の同期を維持するために、イベント ハンドラーが両方の要素にアタッチされます。いずれかの要素のスクロールバーが移動されるたびに、もう一方の要素もそれに応じて更新され、両方のスクロールバーの同期が保たれます。

対話型のデモについては、提供されているフィドルを参照してください。

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

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

<code class="javascript">$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

この手法を採用すると、表の上部と下部の両方に水平スクロールバーの存在を効果的に模倣でき、ユーザーにとって便利なナビゲーションが可能になります。

以上がHTML と CSS で表の上部と下部の両方に水平スクロールバーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。