大きなテーブルにデュアル水平スクロールバーを実装するにはどうすればよいですか?

大きな表の二重水平スクロールバー

問題:

ページ上に大きな表があり、ユーザーは次のことを行おうとします。ナビゲーションを容易にするために、上部と下部の両方の水平スクロールバーを実装します。

HTML と CSS を使用した実装:

必要な機能を実現するために、創造的なアプローチが採用されています。 「ダミー」div はテーブルの上に配置され、スクロールバーを収容できる十分な高さでレンダリングされます。ダミー div とテーブルの両方に水平スクロール機能が割り当てられます。

コードの内訳:

HTML:

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Table Content -->
  </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="js">$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

関数:

• ダミー div (.div1) は、上部のスクロールバーをシミュレートし、非表示のプレースホルダーとして機能します。
• 実際のテーブル (.div2) にはテーブルのコンテンツが含まれており、水平スクロールが有効になっています。
• JavaScriptイベント ハンドラーは、どちらかのスクロールバーが移動すると、もう一方のスクロールバーも同期して移動することを保証します。

ライブの例:

ライブ デモについては、提供されているを参照してください。フィドル。

以上が大きなテーブルにデュアル水平スクロールバーを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。