Bagaimana untuk menyembunyikan skrol dalam css

Cara menyembunyikan skrol dalam CSS: 1. Dalam Firefox, anda boleh menyembunyikan bar skrol melalui atribut "scrollbar-width: none; /* Firefox */" 2. Dalam pelayar IE, anda boleh gunakan Atribut " -ms-prefix" mentakrifkan gaya bar skrol 3. Dalam Chrome dan Safari, anda boleh menggunakan pemilih bar skrol CSS dan kemudian menyembunyikannya melalui "display:none".

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi css3, komputer DELL G3

Cara menyembunyikan skrol dalam css ?

Sembunyikan bar skrol elemen menggunakan CSS

Bagaimana untuk menyembunyikan bar skrol semasa masih boleh menatal pada mana-mana elemen?

Pertama sekali, jika anda perlu menyembunyikan bar skrol dan menunjukkannya apabila kandungan melimpah, anda hanya perlu menetapkan limpahan: gaya auto. Jika anda ingin menyembunyikan bar skrol sepenuhnya, tetapkan limpahan: tersembunyi, tetapi ini akan menyebabkan kandungan elemen tidak boleh ditatal. Sehingga hari ini, tiada peraturan CSS yang membenarkan elemen menyembunyikan bar skrol semasa masih menatal kandungan Ini hanya boleh dicapai dengan menetapkan gaya bar skrol untuk penyemak imbas tertentu.

Pelayar Firefox

Untuk Firefox, kami boleh menetapkan lebar bar skrol kepada tiada:

scrollbar-width: none; /* Firefox */

pelayar IE

Untuk IE, kita perlu menggunakan atribut -ms-prefix untuk mentakrifkan gaya bar skrol:

-ms-overflow-style: none; /* IE 10+ */

Chrome dan Safari

Untuk Chrome dan Safari kita perlu menggunakan pemilih bar skrol CSS dan kemudian paparan: tiada Sembunyikan:

::-webkit-scrollbar {
  display: none; /* Chrome Safari */}

Nota: Apabila anda ingin menyembunyikan bar skrol, sebaiknya tetapkan paparan limpahan kepada auto atau tatal untuk memastikan kandungan boleh ditatal.

Contoh

Kami menggunakan sifat CSS di atas dan limpahan untuk melaksanakan contoh berikut - menyembunyikan bar skrol mendatar sambil membenarkan menegak Bar tatal:

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */}.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

Pembelajaran yang disyorkan: "tutorial video css"

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan skrol dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!