Bagaimanakah Saya Boleh Lumpuhkan Bar Skrol Tanpa Menyembunyikannya dalam Pembangunan Web?

Melumpuhkan Bar Tatal tanpa Menyembunyikannya

Dalam pembangunan web, kadangkala perlu melumpuhkan bar skrol pada elemen induk semasa menggunakan peti cahaya. Walau bagaimanapun, hanya menyembunyikan bar skrol menggunakan limpahan: tersembunyi selalunya tidak diingini, kerana ia boleh menyebabkan tapak melompat dan menduduki ruang di mana bar skrol berada.

Terdapat penyelesaian berdaya maju yang membolehkan untuk melumpuhkan bar skrol semasa masih memaparkan mereka. Jika halaman di bawah peti cahaya boleh diletakkan di bahagian atas, anda boleh menggunakan kod CSS berikut:

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

Ini akan memaparkan bar skrol tetapi menghalang kandungan daripada ditatal. Untuk memulihkan bar skrol selepas menutup peti cahaya, hanya kembalikan sifat ini:

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

Pendekatan ini tidak memerlukan pengubahsuaian acara skrol.

Mengatasi Kedudukan Tatal Sedia Ada

Jika halaman sudah ditatal sebelum peti cahaya dibuka, anda boleh mendapatkan semula semasa tatal kedudukan melalui JavaScript dan tetapkan ia sebagai harta teratas elemen badan. Ini akan mengekalkan kedudukan skrol semasa semasa penggunaan peti cahaya.

CSS

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

JavaScript

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

Oleh melaksanakan penyelesaian ini, anda boleh melumpuhkan bar skrol dengan berkesan tanpa menyembunyikannya, mengekalkan persembahan visual yang dimaksudkan untuk anda halaman web.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Lumpuhkan Bar Skrol Tanpa Menyembunyikannya dalam Pembangunan Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!