⭐ 0
🔍
Teks Gambar PDF & Dokumen Audio Musik Elektronika Waktu Utilitas Validator Esoterik Game

Generator Scrollbar CSS

Atur lebar, track, thumb, dan warna hover scrollbar, lalu lihat hasil WebKit yang sesungguhnya di samping hasil Firefox yang sesungguhnya — dua sistem browser yang benar-benar berbeda, berdampingan.

🔒 Diproses sepenuhnya di browser Anda — apa pun yang Anda masukkan di sini tidak akan pernah diunggah.

10px
8px

Ditata dengan pseudo-elemen ::-webkit-scrollbar — kotak ini dirender melalui mesin nyata browser Anda jika itu Chrome, Safari, atau Edge.

Ditata dengan properti scrollbar-width dan scrollbar-color Firefox. Browser lain mengabaikan ini dan menampilkan scrollbar default mereka sendiri di sini — buka halaman ini di Firefox untuk melihat hasil sebenarnya.

Firefox tidak memiliki warna hover terpisah, border-radius thumb, atau penataan track independen — hanya scrollbar-width, yang dipetakan di sini dari ketebalan pilihan Anda ke kata kunci sebenarnya: thin

Memproses... 0%

Hasil

Chrome, Safari, dan Edge menata scrollbar dengan keluarga pseudo-elemen ::-webkit-scrollbar: aturan terpisah untuk track, thumb, dan status hover thumb, plus lebar dalam piksel dan border-radius thumb. Firefox mengabaikan semua itu dan sebagai gantinya membaca dua properti standar, scrollbar-width dan scrollbar-color, yang kemudian masuk ke spesifikasi CSS Scrollbars. Ini bukan dua dialek dari fitur yang sama — ini adalah dua set fitur berbeda dengan batas atas berbeda, dan kebanyakan generator scrollbar diam-diam menutupi kesenjangan itu dengan hanya menampilkan hasil WebKit. Yang ini tidak.

Tetapkan lebar, warna track, warna thumb, warna hover, dan radius sudut thumb sekali, lalu alat ini membangun dua set aturan dari input yang sama. Blok WebKit membatasi ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, dan status :hover-nya ke kotak demo kiri, jadi yang Anda lihat di sana persis seperti yang dirender Chrome, Safari, dan Edge — mesin asli browser itu sendiri, bukan overlay simulasi. Blok Firefox menetapkan scrollbar-width dan scrollbar-color pada kotak demo kanan menggunakan mesin browser yang sama, itulah sebabnya kotak itu hanya terlihat berbeda saat halaman ini benar-benar dibuka di Firefox; di browser WebKit, kotak itu menampilkan scrollbar bawaannya sendiri di sana, dan alat ini mengatakannya alih-alih memalsukan tampilan Firefox dengan piksel pinjaman.

Pemetaan lebar adalah contoh paling jelas dari kesenjangan itu: scrollbar-width Firefox hanya menerima kata kunci auto, thin, atau none — tidak pernah angka piksel pasti. Generator ini memetakan lebar pilihan Anda dengan jujur (8px ke bawah menjadi thin, yang lebih lebar menjadi auto) dan menampilkan kata kunci hasilnya di samping input Anda, alih-alih menciptakan hasil Firefox palsu yang sempurna piksel yang tidak ada. Firefox juga tidak memiliki cara untuk menetapkan warna hover terpisah, border-radius thumb mandiri, atau warna track yang bukan sekadar nilai kedua dari scrollbar-color — ini adalah keterbatasan platform yang nyata dan permanen, bukan penghilangan di alat ini.

Salin blok CSS gabungan dan kedua set aturan ikut bersama, masing-masing di bawah komentarnya sendiri, siap ditempel ke stylesheet apa adanya. Semuanya merender dan memperbarui di browser Anda sendiri saat Anda menggerakkan kontrol — tanpa unggahan, tanpa akun, tanpa perjalanan bolak-balik server, dan tetap berfungsi offline setelah halaman dimuat.

Menikmati alat ini? Merasa produk ini bermanfaat? Melihat potensi di dalamnya dan ingin mendukungnya?

🛡️
Dijalankan di Browser

File dan masukan Anda tidak pernah meninggalkan perangkat ini. Pemrosesan berjalan sepenuhnya offline. 100% Aman.

Format & Aturan yang Diterima

  • Kontrol bersama — lebar, warna track, warna thumb, warna hover, radius sudut thumb — menggerakkan kedua mesin dari input yang sama.
  • Pemetaan lebar scrollbar yang jujur: Firefox hanya mendukung thin, auto, atau none, jadi nilai piksel yang Anda pilih dipetakan ke kata kunci asli terdekat dan ditampilkan di samping input Anda.
  • Output CSS gabungan yang bisa disalin dengan aturan pseudo-elemen WebKit dan properti standar Firefox, disertai komentar yang jelas.

Manfaat Utama

✓ Dua kotak demo langsung merender scrollbar asli masing-masing mesin — kotak WebKit selalu menampilkan hasil sebenarnya di Chrome, Safari, dan Edge, tanpa rendering palsu.
✓ Kesenjangan kemampuan Firefox ditampilkan, bukan disembunyikan: warna hover, radius thumb, dan pengaturan track mandiri memang tidak ada di Firefox, dan alat ini menyatakannya dengan jelas alih-alih berpura-pura sebaliknya.
✓ Satu blok CSS yang bisa disalin menggabungkan kedua set aturan bersama komentar fallback, siap ditempel apa adanya.

Kasus Penggunaan

  • • Gaya scrollbar sidebar dasbor agar sesuai palet merek sambil melihat seberapa jauh gaya itu berfungsi di Firefox sebelum mengirimkannya.
  • • Ambil kata kunci lebar scrollbar Firefox yang jujur untuk ketebalan tertentu alih-alih menebak apakah thin atau auto yang lebih cocok.
  • • Salin satu blok CSS yang memuat aturan pseudo-elemen WebKit dan properti standar Firefox, masing-masing dikomentari dengan jelas, langsung ke stylesheet.