Bagaimana caranya - Bilah Gulir Khusus
Pelajari cara membuat bilah gulir khusus dengan CSS.
Scrollbar Kustom
Catatan: Bilah gulir khusus tidak didukung di Firefox atau di Edge, versi sebelumnya 79.
Cara Membuat Bilah Gulir Khusus
Chrome, Edge, Safari, dan Opera mendukung ::-webkit-scrollbar
elemen pseudo non-standar, yang memungkinkan kita untuk mengubah tampilan bilah gulir browser.
Contoh berikut membuat scrollbar tipis (10px lebar), yang memiliki warna track/bar abu-abu dan gagang abu-abu tua (#888):
Contoh
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Contoh ini membuat bilah gulir dengan bayangan kotak:
Contoh
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
Pemilih bilah gulir
Untuk browser webkit, Anda dapat menggunakan elemen semu berikut untuk menyesuaikan scrollbar browser:
::-webkit-scrollbar
bilah gulir.::-webkit-scrollbar-button
tombol pada bilah gulir (panah mengarah ke atas dan ke bawah).::-webkit-scrollbar-thumb
pegangan gulir yang dapat diseret.::-webkit-scrollbar-track
trek (bilah kemajuan) bilah gulir.::-webkit-scrollbar-track-piece
track (progress bar) TIDAK tertutup oleh pegangan.::-webkit-scrollbar-corner
sudut bawah bilah gulir, tempat bilah gulir horizontal dan vertikal bertemu.::-webkit-resizer
pegangan pengubahan ukuran yang dapat diseret yang muncul di sudut bawah beberapa elemen.