Bagaimana untuk menyembunyikan bilah guling
- Halaman sebelumnya Scrollbar yang disesuaikan
- Halaman berikutnya Tampilkan/dipaksa tampilkan scrollbar
Belajar bagaimana menggunakan CSS untuk menyembunyikan bilah guling.
Bagaimana untuk menyembunyikan bilah guling
Tambahkan overflow: hidden;dapat menyembunyikan bilah guling horizontal dan vertikal sekaligus.
Contoh
body {
overflow: hidden; /* Sembunyikan bilah guling */
}
Untuk hanya menyembunyikan bilah guling vertikal atau hanya menyembunyikan bilah guling horizontal, gunakan overflow-y atau overflow-x:
Contoh
body {
overflow-y: hidden; /* Sembunyikan bilah guling vertikal */
overflow-x: hidden; /* Sembunyikan bilah guling horizontal */
}
Perhatikan bahwa,overflow:hidden Juga akan menghapus fungsi bilah guling. Tidak dapat digerakkan di halaman dalam.
Sembunyikan bilah guling tetapi tetap mempertahankan fungsi
Untuk menyembunyikan bilah guling tetapi tetap dapat bergerak, dapat digunakan kode berikut:
Contoh
/* Sembunyikan bilah guling untuk Chrome, Safari, dan Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Sembunyikan bilah guling untuk IE, Edge, dan Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Peramban Webkit (seperti Chrome, Safari, dan Opera) mendukung standar yang tidak biasa ::-webkit-scrollbar Elemt asli yang memungkinkan kami mengubah tampilan bilah guling browser. Didukung IE dan Edge -ms-overflow-style: yang didukung Firefox Atribut scrollbar-width Atribut, atribut ini memungkinkan kami menyembunyikan bilah guling tetapi tetap mempertahankan fungsinya.
Halaman yang berhubungan
Panduan:Overflow CSS
Panduan referensi:Properti overflow CSS
- Halaman sebelumnya Scrollbar yang disesuaikan
- Halaman berikutnya Tampilkan/dipaksa tampilkan scrollbar
