Bagaimana untuk Mencipta Bar Skrol Mendatar di Kedua-dua Atas dan Bawah Jadual dalam HTML dan CSS?

Cara Meletakkan Bar Tatal Mendatar pada Kedua-dua Bahagian Atas dan Bawah Jadual dalam HTML dan CSS

Untuk menangani keperluan untuk bar skrol mendatar pada kedua-dua bahagian atas dan bawah jadual besar, ia tidak boleh langsung menggunakan HTML dan CSS sahaja. Walau bagaimanapun, penyelesaian yang berkesan wujud untuk mensimulasikan kehadiran dua bar skrol.

Caranya ialah meletakkan div "dummy" di atas meja, memberikan ketinggian yang cukup untuk memuatkan bar skrol mendatar. Div dummy ini akan berfungsi sebagai bar skrol "kedua".

Untuk mengekalkan penyegerakan antara div dummy dan jadual sebenar, pengendali acara dilampirkan pada kedua-dua elemen. Apabila bar skrol bagi mana-mana elemen dialihkan, elemen lain dikemas kini dengan sewajarnya, memastikan kedua-dua bar skrol kekal segerak.

Untuk demonstrasi interaktif, rujuk biola yang disediakan:

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

Dengan menggunakan teknik ini, anda boleh meniru kehadiran bar skrol mendatar dengan berkesan pada kedua-dua bahagian atas dan bawah jadual anda, membolehkan navigasi yang mudah untuk pengguna anda.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bar Skrol Mendatar di Kedua-dua Atas dan Bawah Jadual dalam HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!