Scrollbar - Trik CSS | CSS Almanak 2024

Sejarah singkat styling scrollbar:

Dulu adalah hal yang hanya bisa dilakukan Internet Explorer (versi kuno) dengan hal-hal seperti -ms-scrollbar-base-color. Ini sudah tidak ada lagi.
Kemudian mesin peramban berbasis WebKit ikut serta dengan hal-hal seperti ::-webkit-scrollbar. Itulah yang sebagian besar dicakup oleh entri Alamanac ini, karena berfungsi di seluruh lanskap Safari / Chrome hari ini.
Standar akhirnya terlibat, dan opsi gaya tersebut ditutupi oleh properti yang tidak diawali seperti scrollbar-color dan scrollbar-width.

Gulir gaya untuk dunia Safari / Chrome ditampilkan di belakang -webkitawalan vendor.

Entri almanak ini adalah ikhtisar, untuk perincian yang lebih lengkap tentang bekerja dengan bilah gulir khusus, baca artikel Trik CSS ini.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

The -webkit-scrollbarkeluarga properti terdiri dari pseudo-elemen yang berbeda tujuh itu, bersama-sama, terdiri dari unsur scrollbar UI penuh:

::-webkit-scrollbarmembahas latar belakang bilah itu sendiri. Biasanya ditutupi oleh elemen lainnya
::-webkit-scrollbar-button membahas tombol arah pada scrollbar
::-webkit-scrollbar-track mengatasi ruang kosong "di bawah" bilah kemajuan
::-webkit-scrollbar-track-piece adalah lapisan paling atas dari bilah kemajuan yang tidak tercakup oleh elemen gulir yang dapat diseret (ibu jari)
::-webkit-scrollbar-thumb menangani elemen gulir yang dapat ditarik dan diubah ukurannya bergantung pada ukuran elemen yang dapat digulir
::-webkit-scrollbar-corner membahas sudut bawah (biasanya) dari elemen yang dapat digulir, tempat dua bilah gulir mungkin bertemu
::-webkit-resizermenangani tuas pengubah ukuran yang dapat ditarik yang muncul di atas scrollbar-cornerdi sudut bawah beberapa elemen

Selain elemen pseudo ini, ada juga sebelas kelas pseudo-selector yang tidak diperlukan tetapi memberi desainer kemampuan untuk mengatur gaya berbagai status dan interaksi UI scrollbar. Rincian lengkap pseudo-selector tersebut, dan contoh mendetail, dapat ditemukan di artikel Trik CSS ini.

Lihat Pena ini!

Tempat Menarik

Jika tidak ada pemilih yang memenuhi syarat sebelum berbagai elemen semu, gaya akan diterapkan ke setiap bilah gulir yang mungkin muncul di laman.
Menyetel -webkit-scrollbargaya adalah cara yang baik untuk memaksa laman web Anda menampilkan bilah gulir horizontal atau vertikal pada versi Mac OS yang lebih baru dari Lion, di mana bilah gulir biasanya disembunyikan secara default.
Karena properti ini berada di belakang -webkitawalan vendor, beberapa plugin jQuery telah ditulis ke "polyfill" atau memperluas fungsionalitas ini ke browser lain. Salah satu plugin tersebut adalah jScrollPane.

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.