Bolehkah saya Mempunyai Bar Skrol Mendatar di Bahagian Atas dan Bawah Jadual Menggunakan HTML dan CSS?

Bar Tatal Mendatar di Atas dan Bawah

Soalan:

Adakah mungkin untuk mempunyai bar skrol mendatar di bahagian atas dan bawah jadual besar hanya menggunakan HTML dan CSS?

Jawapan:

Ya, anda boleh mensimulasikan bar skrol mendatar kedua di bahagian atas daripada elemen.

Pelaksanaan:

Buat div "dummy" di atas jadual yang mempunyai tatal mendatar. Div ini sepatutnya cukup tinggi untuk bar skrol.

Lampirkan pengendali acara pada acara skrol kedua-dua div dummy dan jadual sebenar. Ini akan menyegerakkan penatalan kedua-dua bar skrol apabila salah satu daripadanya dialihkan.

Sampel Kod:

HTML:

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

Contoh Langsung:

Lihat [contoh langsung](pautan biola di sini) untuk menggambarkan kesannya.

Atas ialah kandungan terperinci Bolehkah saya Mempunyai Bar Skrol Mendatar di Bahagian Atas dan Bawah Jadual Menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!