Pembuat Scrollbar CSS

Pembuat Scrollbar CSS adalah alat online gratis yang memungkinkan Anda menyesuaikan desain scrollbar situs web Anda dan secara instan membuat kode CSS yang diperlukan.
Cukup operasikan slider dan pemilih warna untuk menyesuaikan gaya jempol dan trek, seperti warna, lebar, dan radius batas, sambil melihat pratinjau secara waktu nyata.
Kode yang dihasilkan kompatibel tidak hanya dengan browser WebKit seperti Chrome, Safari, dan Edge, tetapi juga mendukung Firefox melalui scrollbar-color dan scrollbar-width. Semua pemrosesan diselesaikan di dalam browser Anda, menjadikannya aman, cepat, dan gratis untuk digunakan tanpa instalasi atau registrasi apa pun.

WebKit Prefix (::-webkit-scrollbar)

Pseudo-elemen CSS non-standar yang digunakan untuk menyesuaikan scrollbar di browser yang didukung oleh mesin WebKit/Blink, seperti Chrome, Safari, dan Edge. Ini memungkinkan desain yang sangat dapat disesuaikan.

Scrollbar Track

Latar belakang atau lekukan scrollbar. Anda dapat menatanya menggunakan ::-webkit-scrollbar-track untuk mengatur warna latar belakang atau bayangan dalam.

Scrollbar Thumb

Bagian scrollbar yang dapat ditarik yang menunjukkan posisi gulir. Ini ditata menggunakan ::-webkit-scrollbar-thumb untuk menyesuaikan warna dan radius batasnya.

scrollbar-color dan scrollbar-width

Properti CSS standar W3C yang didukung oleh browser seperti Firefox yang tidak mendukung awalan WebKit. Mereka memungkinkan Anda mengatur warna jempol dan trek serta menentukan lebarnya (auto, thin, atau none).

Kompatibilitas Lintas Browser

Kemampuan situs web untuk berfungsi dan ditampilkan secara konsisten di berbagai browser web (Chrome, Firefox, Safari, dll.). Alat kami menghasilkan kode yang bekerja mulus di semua browser utama.

Q.Apakah CSS yang dihasilkan akan berfungsi di ponsel pintar?

Ya, ini berfungsi pada browser seluler berbasis WebKit seperti Safari di iOS dan Chrome di Android. Namun, tergantung pada spesifikasi OS, scrollbar mungkin hanya muncul saat menggulir.

Q.Bisakah saya menerapkan scrollbar hanya ke elemen tertentu (seperti div)?

Ya, bisa. Cukup ganti .custom-scrollbar pada kode yang dihasilkan dengan kelas atau ID dari elemen spesifik Anda (misalnya, .my-container atau #scroll-box).

Q.Apakah kompatibel dengan browser Firefox?

Ya. Alat ini secara otomatis menghasilkan bukan hanya pseudo-elemen WebKit tetapi juga properti standar W3C scrollbar-color dan scrollbar-width untuk Firefox.

Q.Apakah data saya disimpan di server saat menggunakan alat ini?

Tidak. Alat ini berjalan sepenuhnya di browser Anda menggunakan JavaScript, sehingga pengaturan dan kode yang Anda buat tidak pernah dikirim ke server eksternal.

Q.Bagaimana cara menyembunyikan scrollbar sepenuhnya?

Untuk menyembunyikan scrollbar dengan tetap mempertahankan fungsionalitas gulir, Anda dapat menggunakan ::-webkit-scrollbar { display: none; } untuk WebKit dan scrollbar-width: none; untuk Firefox.