Bagaimana untuk Melumpuhkan Bar Skrol Badan Tanpa Menyembunyikan Ia?

Melumpuhkan HTML/Bar Tatal Badan Semasa Mengekalkan Keterlihatan

Untuk pengalaman peti cahaya yang optimum, seseorang mungkin ingin melumpuhkan bar skrol elemen induk tanpa menyembunyikan buat sementara waktu ia. Untuk mencapainya, pertimbangkan pendekatan berikut:

Betulkan Elemen Induk:

Apabila membuka peti cahaya, tetapkan sifat CSS berikut pada halaman yang mendasari tindanan:

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

Ini membetulkan kedudukan halaman dan mengehadkan penatalan menegak ke halaman itu sendiri, sambil mengekalkan bar skrol keterlihatan.

Tetapkan semula pada Tutup Peti Cahaya:

Apabila menutup peti cahaya, pulihkan sifat CSS asal:

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

Mengendalikan Sedia Ada Tatal:

Untuk mengekalkan kedudukan tatal semasa halaman, gunakan JavaScript untuk mendapatkan nilai tatal atas dokumen sebelum membuka peti cahaya dan menetapkannya sebagai sifat teratas elemen badan:

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

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

Atas ialah kandungan terperinci Bagaimana untuk Melumpuhkan Bar Skrol Badan Tanpa Menyembunyikan Ia?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!