Bagaimana untuk Mencipta Bar Skrol Dwi Mendatar (Atas dan Bawah) untuk Jadual menggunakan HTML, CSS dan JavaScript?

Mencipta Bar Tatal Mendatar pada Kedua-dua Bahagian Atas dan Bawah Jadual

Dalam kes di mana jadual besar melepasi tetingkap penyemak imbas yang boleh dilihat, selalunya wajar untuk mempunyai bar skrol di bahagian atas dan bawah untuk menavigasi keseluruhan kandungan jadual dengan cekap.

Dalam HTML dan CSS tulen, ini boleh dicapai dengan mensimulasikan bar skrol mendatar kedua di bahagian atas. Begini caranya:

1. Buat Dummy Div:

   Tambahkan elemen div di atas jadual dan gayakannya dengan ketinggian yang mencukupi untuk mencipta penampilan daripada bar skrol (cth., 20px).

2. Lumpuhkan Tatal Menegak:

   Tetapkan limpahan-y: tersembunyi untuk kedua-dua div tiruan dan div induk jadual untuk menyekat penatalan kepada mendatar paksi.

3. Dayakan Tatal Mendatar:

   Tetapkan limpahan-x: tatal untuk div tiruan dan div induk jadual untuk membolehkan tatal mendatar masuk kedua-duanya kawasan.

4. Segerakkan Bar Tatal:

   Gunakan JavaScript untuk menyegerakkan tatal div dummy dan jadual dengan melampirkan pendengar acara pada acara tatal . Apabila satu bar skrol dialihkan, satu lagi akan melaraskan sewajarnya.

Berikut ialah contoh yang meletakkan div tiruan di atas ibu bapa jadual div:

HTML:

<div class="table-wrapper">
  <div class="dummy-scrollbar"></div>
  <div class="data-table">
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.table-wrapper {
  height: 130%;
  overflow: auto;
  width: 100%;
}

.dummy-scrollbar {
  height: 20px;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.data-table {
  overflow-x: scroll;
  overflow-y: visible;
  width: 100%;
}

JavaScript:

$(".table-wrapper").scroll(function() {
  $(".dummy-scrollbar").scrollLeft($(this).scrollLeft());
});

$(".dummy-scrollbar").scroll(function() {
  $(".table-wrapper").scrollLeft($(this).scrollLeft());
});

Dengan melaksanakan pendekatan ini, anda boleh mencipta ilusi bar skrol mendatar kedua di atas meja anda, mempertingkatkan navigasi dan kebolehaksesan.