Lewati ke konten utama
iotools.cloudiotools.cloud

Generator Gaya Scrollbar CSS

Buat CSS scrollbar kustom lintas-browser — aturan WebKit ::-webkit-scrollbar-* ditambah scrollbar-color/scrollbar-width Firefox — dari pengaturan lebar, track, thumb, dan sudut, dengan pratinjau langsung yang benar-benar bisa di-scroll.

Input

Lebar

Warna

Hanya terlihat di mana scrollbar vertikal dan horizontal bertemu.

Bentuk & markup

Mengatur jarak thumb dari track dengan cincin warna track, sehingga terlihat seperti mengambang.

Terapkan kelas ini ke elemen apa pun dengan overflow — setiap selector di-scope di bawahnya.

Output

Your scrollbar will appear here.

CSS yang dihasilkan sebenarnya, terisolasi dalam Shadow DOM — scroll kotak untuk melihatnya.

HTML

Kotak yang dapat di-scroll dengan kelas yang diterapkan — ganti tinggi/konten dengan milik Anda sendiri.

CSS
Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-scrollbar-style-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "widthPreset": "thin",
    "customWidth": "12",
    "trackColor": "#f1f5f9",
    "thumbColor": "#94a3b8",
    "thumbHoverColor": "#64748b",
    "cornerColor": "#f1f5f9",
    "trackRadius": "8",
    "thumbRadius": "8",
    "floatingThumb": "true",
    "className": "io-scrollbar"
  }'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `css-scrollbar-style-generator` tool (CSS Scrollbar Style Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/css-scrollbar-style-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Generator Gaya Scrollbar CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Apa yang dilakukan alat ini

Browser tidak setuju tentang cara menggaya scrollbar. Chrome, Safari, dan Edge menggunakan serangkaian pseudo-elemen ::-webkit-scrollbar-*; Firefox mengabaikan semuanya dan membaca dua properti shorthand, scrollbar-width dan scrollbar-color. Alat ini membuat keduanya sekaligus dari beberapa kontrol — lebar, warna track, warna thumb, warna hover, warna sudut dan corner radius — dan menampilkan pratinjau yang dapat di-scroll secara real-time sehingga Anda dapat melihat hasilnya sebelum menyalin apa pun.

Cara menggunakannya

  1. Pilih Lebar Scrollbar — Tipis, Otomatis (lebar default browser yang diubah warna), nilai piksel Kustom, atau Tersembunyi.
  2. Atur warna Track, Thumb, Thumb Hover, dan Sudut.
  3. Sesuaikan Track Radius dan Thumb Radius, dan toggle Floating thumb untuk inset thumb dari track dengan cincin warna track.
  4. Berikan Nama Kelas, kemudian scroll pratinjau langsung untuk memeriksanya.
  5. Salin CSS ke stylesheet Anda dan terapkan nama kelas ke elemen apa pun dengan overflow: auto atau overflow: scroll.

Mengapa CSS perlu blok WebKit dan blok Firefox?

Tidak ada satu standar API penataan scrollbar yang tunggal. Browser berbasis WebKit mengekspos scrollbar sebagai lima pseudo-elemen yang dapat ditata (::-webkit-scrollbar, -track, -thumb, -thumb:hover, -corner); Firefox mengimplementasikan properti scrollbar-width/scrollbar-color yang lebih baru dan jauh lebih sederhana dan tidak mendukung pseudo-elemen WebKit sama sekali. Pengiriman hanya satu bagian membuat seluruh engine browser dengan scrollbar default yang belum ditata, jadi CSS yang dihasilkan selalu menyertakan keduanya.

Mengapa Firefox tidak dapat menggunakan lebar piksel kustom saya?

scrollbar-width hanya menerima tiga kata kunci — auto, thin, none — tidak ada properti untuk nilai piksel yang tepat. Ketika Anda memilih lebar Custom, Firefox kembali ke thin, yang merupakan opsi terdekat yang tersedia.

Apakah ini akan mempengaruhi scrollbar di tempat lain di halaman saya?

Tidak. Setiap aturan di-scope di bawah nama kelas yang Anda pilih, jadi hanya elemen yang Anda terapkan kelas itu yang terpengaruh — sisa halaman menyimpan scrollbar native-nya.

Bagaimana jika saya ingin menyembunyikan scrollbar sepenuhnya?

Pilih preset lebar Hidden. Ini mengatur scrollbar-width: none untuk Firefox dan display: none pada pseudo-elemen scrollbar WebKit, sehingga elemen masih bisa di-scroll (dengan roda mouse, sentuhan, atau skrip) tetapi tidak menampilkan track atau thumb scrollbar sama sekali.

Bagaimana jika saya membutuhkan efek scroll yang sama sekali berbeda?

Untuk animasi yang dipicu scroll daripada penampilan scrollbar, lihat CSS Scroll-Driven Animation Generator. Untuk membulatkan sudut kotak yang dapat di-scroll itu sendiri daripada scrollbar-nya, gunakan CSS Border Radius Generator.

scrollbarcsswebkitfirefoxscrollbar-colorscrollbar-widthgeneratorweb design

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan