Bagaimana untuk Mencipta Bar Skrol Mendatar Atas dan Bawah yang Disegerakkan untuk Jadual Menggunakan HTML dan CSS Sahaja?

Cara Membuat Bar Tatal Mendatar pada Kedua-dua Bahagian Atas dan Bawah Jadual dengan Hanya HTML dan CSS

Masalah:

Seorang pengguna ingin menambah bar skrol mendatar pada bahagian atas dan bawah meja besar tanpa menggunakan sebarang JavaScript.

Penyelesaian:

Adalah mungkin untuk mensimulasikan bar skrol mendatar kedua di atas jadual dengan menggunakan CSS untuk mencipta div "dummy" di atas jadual yang mempunyai penatalan mendatar dan ketinggian yang cukup tinggi untuk bar skrol. Pengendali acara untuk acara "tatal" kemudiannya boleh dilampirkan pada elemen tiruan dan jadual sebenar, menyegerakkan tatal kedua-dua elemen apabila salah satu bar tatal dialihkan.

Kod Coretan:

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.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;
}

JavaScript:

$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

Div tiruan (.div1) akan muncul sebagai bar skrol mendatar kedua di atas elemen jadual sebenar (.div2). Dengan menyegerakkan penatalan kedua-dua elemen, pengguna boleh menatal kandungan jadual sama ada dari bar skrol atas atau bawah.