Bagaimana untuk membatalkan bar skrol dalam css

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk menyatakan gaya dokumen. Ia menyediakan banyak atribut gaya dan peraturan untuk membantu kami mencapai reka letak dan pembentangan halaman web. Antaranya, bar skrol ialah elemen halaman web biasa, tetapi kadangkala kita mungkin mahu membatalkan paparannya. Artikel ini akan memperkenalkan cara menggunakan CSS untuk membatalkan bar skrol.

1. Batalkan bar skrol menegak

1. Tambah atribut limpahan:hidden pada teg badan. Kaedah ini adalah yang paling mudah dan mudah dan akan menyembunyikan bar skrol menegak untuk keseluruhan halaman.

body {
  overflow-y:hidden;
}

2. Gunakan ::-webkit-scrollbar pseudo-element. Kaedah ini hanya digunakan pada penyemak imbas berasaskan webkit, seperti Chrome dan Safari. Elemen ::-webkit-scrollbar pseudo-element boleh mengawal gaya bar skrol Kita boleh menetapkan lebarnya kepada 0 untuk menyembunyikan bar skrol menegak.

body::-webkit-scrollbar {
  width: 0px;
}

3. Gunakan ::-ms-scrollbar pseudo-element. Kaedah ini hanya digunakan untuk pelayar IE dan menggunakan kaedah yang serupa dengan bar skrol webkit pseudo-elemen. Begitu juga, menetapkan lebarnya kepada 0 menyembunyikan bar skrol menegak.

body::-ms-scrollbar {
  width: 0px;
}

2. Batalkan bar skrol mendatar

1. Tambahkan atribut overflow-x:hidden pada teg badan. Kaedah ini serupa dengan membatalkan bar skrol menegak, yang akan menyembunyikan bar skrol mendatar untuk keseluruhan halaman.

body {
  overflow-x:hidden;
}

2. Gunakan ::-webkit-scrollbar-horizontal pseudo-element. Elemen pseudo ini hanya akan menjejaskan bar skrol mendatar Anda juga boleh menetapkan lebarnya kepada 0 untuk menyembunyikan bar skrol mendatar.

body::-webkit-scrollbar-horizontal {
  height: 0px;
}

3. Gunakan ::-ms-scrollbar-horizontal pseudo-element. Pelayar IE juga menyokong menyembunyikan bar skrol mendatar, hanya gunakan kaedah yang serupa dengan di atas untuk mengawal lebarnya.

body::-ms-scrollbar-horizontal {
  height: 0px;
}

3. Batalkan anak panah bar skrol

Selain menyembunyikan bar skrol itu sendiri, kadangkala anda juga perlu menyembunyikan anak panah bar skrol (juga dipanggil butang bar skrol ). Berikut ialah beberapa cara untuk melakukannya.

1. Gunakan ::-webkit-scrollbar-button pseudo-element. Elemen pseudo ini mengawal butang anak panah pada bar skrol, yang boleh disembunyikan dengan menjadikannya lutsinar.

body::-webkit-scrollbar-button {
  background-color: transparent;
}

2. Gunakan ::-ms-scrollbar-button pseudo-element. Internet Explorer juga menyokong kaedah elemen pseudo untuk menyembunyikan anak panah bar skrol.

body::-ms-scrollbar-button {
  background-color: transparent;
}

4. Batalkan trek bar skrol

Trek bar skrol merujuk kepada garisan di sebelah bar skrol dan juga kawasan yang boleh diseret oleh pengguna. Berikut ialah beberapa cara untuk menyahaktifkan trek bar skrol.

1. Gunakan ::-webkit-scrollbar-track pseudo-element. Elemen pseudo ini boleh membantu kami mengawal paparan dan penyembunyian trek bar skrol.

body::-webkit-scrollbar-track {
  background-color: transparent;
}

2. Gunakan ::-ms-scrollbar-track pseudo-element. Begitu juga, pelayar IE juga menyokong menyembunyikan trek bar skrol.

body::-ms-scrollbar-track {
  background-color: transparent;
}

Ringkasan

Di atas ialah beberapa cara untuk membatalkan bar skrol menggunakan CSS. Sudah tentu, keserasian kaedah ini mungkin berbeza-beza dalam pelayar yang berbeza, dan kami perlu membuat pilihan dan pelarasan berdasarkan keadaan tertentu. Dalam aplikasi praktikal, kami juga perlu mempertimbangkan secara menyeluruh faktor seperti reka bentuk halaman, pengalaman pengguna dan keserasian penyemak imbas untuk memutuskan sama ada untuk menggunakan kaedah ini.

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