Cara - Sembunyikan Scrollbar
Pelajari cara menyembunyikan scrollbar dengan CSS.
Cara Menyembunyikan Scrollbar
Tambahkan overflow: hidden;
untuk menyembunyikan bilah gulir horizontal dan vertikal.
Contoh
body {
overflow: hidden; /* Hide scrollbars */
}
Untuk hanya menyembunyikan scrollbar vertikal, atau hanya scrollbar horizontal, gunakan overflow-y
atau overflow-x
:
Contoh
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Perhatikan bahwa overflow: hidden
itu juga akan menghapus fungsionalitas bilah gulir. Tidak mungkin menggulir ke dalam halaman.
Tip: Untuk mempelajari lebih lanjut tentang overflow
properti, buka Tutorial CSS Overflow kami atau Referensi Properti CSS overflow .
Sembunyikan Scrollbar Tapi Pertahankan Fungsinya
Untuk menyembunyikan scrollbars, tetapi tetap dapat terus menggulir, Anda dapat menggunakan kode berikut:
Contoh
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /*
IE and Edge */
scrollbar-width: none; /* Firefox */
}
Peramban webkit, seperti Chrome, Safari, dan Opera, mendukung ::-webkit-scrollbar
elemen semu non-standar, yang memungkinkan kita untuk mengubah tampilan bilah gulir peramban. IE dan Edge mendukung -ms-overflow-style:
properti, dan Firefox mendukung scrollbar-width
properti, yang memungkinkan kita menyembunyikan bilah gulir, tetapi tetap berfungsi.