Kategori: Alat pengembang
Generator Bilah Gulir CSS
Buat CSS bilah gulir kustom secara lokal dengan pratinjau langsung
Rancang bilah gulir kustom dengan pratinjau langsung dan salin CSS untuk scrollbar-color, scrollbar-width, dan gaya WebKit. Dihasilkan di peramban Anda.
Pratinjau
/* Standard properties: Firefox, and Chrome/Edge 121+ */
.scroll-area {
scrollbar-color: #8a9a8f #eceee9;
scrollbar-width: thin;
}
/* Non-standard WebKit prefix, for older Chrome, Edge and Safari */
.scroll-area::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
background: #eceee9;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb {
background: #8a9a8f;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
background: #6f8076;
}
scrollbar-color dan scrollbar-width adalah properti standar dan itulah yang dipakai Firefox serta Chrome versi sekarang. Aturan ::-webkit- adalah awalan non-standar yang dipertahankan untuk Chrome, Edge, dan Safari lama — kedua mesin tidak akan menampilkan hasil yang identik.
Pratinjau maupun CSS yang dihasilkan sama-sama dibuat di peramban Anda.
Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.
Apa fungsi alat ini
Penataan bilah gulir terbagi di antara dua mekanisme. Modul CSS Scrollbars Styling memberi Anda `scrollbar-color` dan `scrollbar-width`: dua properti, dukungan luas termasuk Firefox, dan kendali yang sengaja dibatasi. Pseudo-elemen `::-webkit-scrollbar` yang lebih tua memberi jauh lebih banyak, tetapi ia awalan non-standar. Generator ini mengeluarkan properti standar lebih dulu dan blok WebKit sesudahnya, dengan keterangan, sehingga Anda mendapat jangkauan luas tanpa berpura-pura keduanya sama. Hasil tampilannya tidak identik, dan bilah gulir adalah kendali yang sungguh diandalkan orang, jadi pratinjau di sini benar-benar bergulir alih-alih menampilkan gambarnya saja.
Cara memakainya
- Tetapkan selektor elemen yang ingin Anda tata, lalu pilih warna batang, jalur, dan sorot.
- Pilih scrollbar-width, lalu atur lebar dan radius WebKit.
- Gulir pratinjaunya untuk memeriksa, lalu salin CSS-nya.
Privasi
Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.
Pertanyaan yang sering diajukan
- Apakah bilah gulir kustom bekerja di semua peramban?
- Tidak secara identik. scrollbar-color dan scrollbar-width bekerja di Firefox serta Chrome dan Edge versi sekarang; aturan ::-webkit- menutup Chrome, Edge, dan Safari lama. Alat ini mengeluarkan keduanya, tetapi kedua mesin menggambar bilah gulir secara berbeda dan tidak ada CSS yang membuatnya persis sama.
- Apa itu scrollbar-color?
- Properti standar yang menetapkan warna batang dan jalur dalam satu deklarasi — batang dulu, lalu jalur. Ia bagian dari modul CSS Scrollbars Styling, jadi inilah versi yang dipakai lebih dulu.
- Mengapa CSS WebKit tetap disertakan?
- Karena properti standar hanya membuka warna dan lebar yang kasar, dan karena versi WebKit serta Blink yang lama tidak mendukungnya. Aturan berawalan menambahkan ukuran dan radius yang eksplisit dan menutup peramban-peramban itu.
- Sebaiknya saya sembunyikan bilah gulirnya sama sekali?
- Hati-hati. scrollbar-width: none menghilangkan petunjuk kasatmata bahwa area itu bisa digulir sekaligus cara menyeretnya, dan itu merugikan siapa pun yang tidak memakai roda tetikus atau trackpad. Pertimbangkan bilah tipis dengan kontras yang baik.