Bagaimana untuk Melaksanakan Bar Skrol Dwi Mendatar untuk Meja Besar?

Bar Tatal Dwi Mendatar untuk Meja Besar

Masalah:

Menghadapi jadual besar pada halaman, pengguna berusaha untuk laksanakan kedua-dua bar skrol mendatar atas dan bawah untuk memudahkan navigasi.

Pelaksanaan menggunakan HTML dan CSS:

Untuk mencapai kefungsian yang diingini, pendekatan kreatif digunakan. Div "dummy" diletakkan di atas meja, diberikan cukup tinggi untuk memuatkan bar skrol. Kedua-dua div dummy dan jadual diberikan keupayaan menatal mendatar.

Pecahan Kod:

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>

Fungsi:

• Div dummy (.div1) mensimulasikan bar skrol atas dan bertindak sebagai pemegang tempat yang tidak kelihatan.
• Jadual sebenar (.div2) mengandungi kandungan jadual dan menatal mendatar didayakan.
• JavaScript pengendali acara memastikan bahawa apabila salah satu bar skrol dialihkan, bar skrol yang lain bergerak serentak.

Contoh Langsung:

Untuk demonstrasi langsung, rujuk kepada yang disediakan biola.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Bar Skrol Dwi Mendatar untuk Meja Besar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!