Mengatur tampilan ScrollBar

ScrollBar

Scrollbar adalah bilah geser yang memperlihatkan kedalaman (vertical scrollbar) dan lebar (horizontal scrollbar) halaman.
Scrollbar hanya muncul ketika lebar atau kedalaman halaman melebihi dimensi viewport atau lebar layar perangkat.

Bagian-bagian Scrollbar

Bagian-bagian dari scrollbar (anatomi scrollbar)

::-webkit-scrollbar	seluruh scrollbar.
::-webkit-scrollbar-button	tombol yang berada pada body scrollbar.
::-webkit-scrollbar-thumb	bagian penggerser halaman.
::-webkit-scrollbar-track	tempat bergesernya thumb.
::-webkit-scrollbar-track-piece	ruang sisa pergeseran thumb.
::-webkit-scrollbar-corner	sudut bertemunya srollbar samping dan bawah.
::-webkit-resizer	tuas sudut untuk mengubah dimensi elemen.

Track (treker)

      

button

Thumb

Track piece

button

Contoh CSS untuk mengkustom tampilan scrollbar.

<style>
body {
    text-align: center;
    font-family: 'Tahoma',sans-serif
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 30px; 
    overflow: auto;
}
::-webkit-scrollbar {
    width: 12px;
}
 ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}
    p {text-align: justify;}
</style>

Lihat Demo Scrollbar

⇐ Sebelumnya

Selanjutnya ⇒