a11y.skipToMainContent
1

CSS Scrollbar Styler

Özel kaydırmabarları görsel olarak tasarlayın – genişlik, iz ve parmak renkler, hover state and Swi – sonra WebKit ve Firefox CSS kopyalayın.

Track radius (optional)

The ::-webkit-scrollbar pseudo-elements style the scrollbar in Chrome, Edge, and Safari. Firefox does not support them and instead uses thescrollbar-width / scrollbar-color fallback included in the output.

Preview (scroll the box)

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Scrollbar Styler

  1. Gemibar genişliğini ve pisti, başparmak, ve parmak uç renkleri ayarlayın.
  2. Bir baş sınır-radius seçin ve tabii ki pisti yuvarlak.
  3. Bir WebKit tarayıcısına bakmak için canlı önizleme kutusunu açın.
  4. WebKit ve Firefox kurallarını kopyalamak için CSS'yi kopyalayın.

What is Scrollbar Styler?

Bu araç CSS'yi basit görsel kontrollerden özel bir kaydırma çubuğu için inşa eder. Gemibar genişliğini, pisti ve parmak renkleri, bir baş arka rengi, baş parmağının border-radius ve opsiyonel bir pist. Bir kaydırmalı önizleme kutusu güncelleştirmeleri yaşamak, böylece sonucu kopyalamadan önce görebilirsiniz.

Çıktı, Chrome, Edge ve Safari tarafından kullanılan WebKit p-element blokunu içerir (:-webkit-scrollbar ve Firefox'un anladığı geri dönüş. Her şey tarayıcınızda çalışır.

Advertisement

FAQ

Neden Firefox'ta önbellek görünüyor?
Firefox WebKit ::-webkit-scrollbar p-elements'ı desteklemiyor. Bunun yerine, sadece ince veya otomatik bir genişlike ve başparmak renkli çifte izin veren, kopyalanan CSS'ye dahil edilen her ikisi de.
Kopyalanan CSS'yi belirli bir elemente nasıl uygulanırım?
Çıktı bir .scrollbox sınıfı hedefler. Bu sınıfı stilize etmek istediğiniz ya da kendi seçicinizle stilize etmeden önce kendi seçici elementinizle değiştirin.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement