Bagaimana untuk menyembunyikan scrollbar
- Halaman sebelumnya Scrollbar yang disesuaikan
- Halaman berikutnya Tampilkan/dipaksa tampilkan scrollbar
Belajar bagaimana untuk menggunaan scrollbar CSS untuk disembunyikan.
Bagaimana untuk menyembunyikan scrollbar
Tambahkan overflow: hidden;, dapat menyembunyikan scrollbar horizontal dan vertikal sekaligus.
Contoh
body {
overflow: hidden; /* Sembunyikan scrollbar */
}
Untuk hanya menyembunyikan scrollbar vertikal atau hanya scrollbar horizontal, gunakan overflow-y atau overflow-x:
Contoh
body {
overflow-y: hidden; /* Sembunyikan scrollbar vertikal */
overflow-x: hidden; /* Sembunyikan scrollbar horizontal */
}
Perhatikan,overflow:hidden Juga akan menghapus fungsi scrollbar. Tidak dapat bergerak di halaman dalam.
Sembunyikan scrollbar tetapi pertahankan fungsi
Untuk menyembunyikan scrollbar tetapi masih dapat bergerak, dapat digunakan kode berikut:
Contoh
/* Sembunyikan scrollbar untuk Chrome, Safari dan Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Sembunyikan scrollbar untuk IE, Edge dan Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Browser Webkit (seperti Chrome, Safari dan Opera) mendukung non-standard ::-webkit-scrollbar Pseudo-element yang memungkinkan kami mengubah tampilan scrollbar penggunaan browser. Didukung oleh IE dan Edge -ms-overflow-style: Didukung oleh Firefox Atribut scrollbar-width Atribut, yang memungkinkan kami menyembunyikan scrollbar tetapi mempertahankan fungsi nya.
Halaman berkaitan
Panduan:Kecelakan CSS
Panduan referensi:Properti overflow CSS
- Halaman sebelumnya Scrollbar yang disesuaikan
- Halaman berikutnya Tampilkan/dipaksa tampilkan scrollbar
