Bolehkah Bar Skrol Mendatar Kedua Dicipta di Bahagian Atas Jadual Hanya Menggunakan HTML dan CSS?

Meniru Bar Tatal Mendatar Kedua di Bahagian Atas Meja

Masalah:

Meningkatkan jadual besar dengan mendatar bar skrol di bahagian bawah dikehendaki. Walau bagaimanapun, mereplikasi bar skrol ini di bahagian atas juga dicari. Adakah ia boleh dilakukan semata-mata dengan HTML dan CSS?

Penyelesaian:

Menggunakan div "dummy" mensimulasikan bar skrol mendatar kedua di atas elemen. Diletakkan terus di atas elemen utama, div dummy ini bersaiz cukup untuk memuatkan bar skrol. Dengan melampirkan pengendali acara pada kedua-dua unsur tiruan dan utama, penyegerakan dipastikan apabila bar skrol digunakan. Div dummy mereplikasi penampilan dan kefungsian bar skrol kedua atas.

Contoh Langsung:

Teroka biola ini untuk praktikal tunjuk cara.

Kod:

HTML:

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
<div class="div2">
  <!-- Content Here -->
</div>
</div>

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

JS:

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

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