Bagaimanakah Saya Boleh Lumpuhkan Tatal Sambil Memastikan Bar Tatal Kelihatan?

Memelihara Keterlihatan Bar Tatal Semasa Melumpuhkan Tatal

Walaupun mungkin untuk menyembunyikan bar skrol menggunakan limpahan: tersembunyi, pendekatan ini boleh mencipta anjakan visual pada tapak web anda . Jika anda ingin melumpuhkan penatalan tanpa menjejaskan keterlihatan, begini caranya:

Betulkan Kedudukan Halaman:

Jika halaman di bawah tindanan boleh dibetulkan di bahagian atas, gunakan mengikut CSS semasa membuka tindanan:

body {
  position: fixed;
  overflow-y: scroll;
}

Ini akan mengekalkan keterlihatan bar skrol tetapi menghalang kandungan menatal. Untuk memulihkan tatal semasa penutupan tindanan, gunakan CSS ini:

body {
  position: static;
  overflow-y: auto;
}

Kekalkan Kedudukan Tatal:

Jika halaman telah ditatal terlebih dahulu, dapatkan document.documentElement.scrollTop menggunakan JavaScript. Tetapkan nilai ini sebagai sifat teratas unsur badan secara dinamik. Ini akan mengekalkan kedudukan skrol semasa sepanjang tempoh tindanan.

CSS:

.noscroll {
  position: fixed;
  top: var(--st, 0);
  inline-size: 100%;
  overflow-y: scroll;
}

JS:

const b = document.body;
b.style.setProperty('--st', -(document.documentElement.scrollTop) + "px");
b.classList.add('noscroll');

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Lumpuhkan Tatal Sambil Memastikan Bar Tatal Kelihatan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!