Bagaimanakah Saya Boleh Menghalang Penatalan Bar Tatal Tanpa Menyembunyikan Bar Tatal?

Mencegah Penatalan Bar Tatal Tanpa Menyembunyikan

Cabaran biasa apabila melaksanakan peti cahaya ialah keperluan untuk melumpuhkan bar tatal pada halaman induk buat sementara waktu tanpa menggunakan limpahan: tersembunyi;. Penyelesaian ini boleh menyebabkan lompatan yang tidak diingini dan pendudukan ruang.

Syukurlah, terdapat pendekatan yang berdaya maju untuk melumpuhkan bar skrol semasa masih memaparkannya. Dengan menggunakan kedudukan tetap untuk elemen di bawah tindanan, kesan ini boleh dicapai. Apabila tindanan diaktifkan, gunakan gaya berikut pada badan:

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

Ini akan memaparkan bar skrol tetapi melumpuhkan fungsinya. Untuk mengembalikan perubahan ini selepas menutup tindanan, cuma pulihkan gaya asal:

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

Dalam kes di mana halaman telah ditatal, menangkap kedudukan skrol semasa melalui JavaScript dan menetapkannya sebagai sifat teratas bagi elemen badan memastikan halaman kekal dalam kedudukan skrol semasa apabila tindanan diaktifkan. Ini boleh dicapai dengan CSS dan JS berikut:

.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');

Dengan melaksanakan pendekatan ini, anda boleh melumpuhkan bar skrol dengan berkesan tanpa menyembunyikannya, mengekalkan kefungsian yang diingini untuk peti cahaya dan halaman induk.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Penatalan Bar Tatal Tanpa Menyembunyikan Bar Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!