6XC

CSS Renkli Scrollbar Oluşturucu

Canlı önizlemeyle renkli özel kaydırma çubuğu tasarlayın, CSS'i kopyalayın — WebKit ve Firefox uyumlu.

737 görüntülenme

Bu alan, özel kaydırma çubuğunuzu denemeniz içindir. Aşağı kaydırdıkça sağdaki çubuğun tasarımınıza uyduğunu göreceksiniz. Renkleri ve ölçüleri değiştirin; sonuç anında bu alana uygulanır.

Bu alan, özel kaydırma çubuğunuzu denemeniz içindir. Aşağı kaydırdıkça sağdaki çubuğun tasarımınıza uyduğunu göreceksiniz. Renkleri ve ölçüleri değiştirin; sonuç anında bu alana uygulanır.

Bu alan, özel kaydırma çubuğunuzu denemeniz içindir. Aşağı kaydırdıkça sağdaki çubuğun tasarımınıza uyduğunu göreceksiniz. Renkleri ve ölçüleri değiştirin; sonuç anında bu alana uygulanır.

Bu alan, özel kaydırma çubuğunuzu denemeniz içindir. Aşağı kaydırdıkça sağdaki çubuğun tasarımınıza uyduğunu göreceksiniz. Renkleri ve ölçüleri değiştirin; sonuç anında bu alana uygulanır.

Bu alan, özel kaydırma çubuğunuzu denemeniz içindir. Aşağı kaydırdıkça sağdaki çubuğun tasarımınıza uyduğunu göreceksiniz. Renkleri ve ölçüleri değiştirin; sonuç anında bu alana uygulanır.

Bu alan, özel kaydırma çubuğunuzu denemeniz içindir. Aşağı kaydırdıkça sağdaki çubuğun tasarımınıza uyduğunu göreceksiniz. Renkleri ve ölçüleri değiştirin; sonuç anında bu alana uygulanır.

Kaydırma Çubuğu CSS ile Nasıl Özelleştirilir?

İki mekanizma vardır: WebKit tarayıcılar (Chrome, Edge, Safari) ::-webkit-scrollbar sözde öğe ailesini kullanır — ray, tutamaç, genişlik ve yarıçap ayrı ayrı biçimlenir; Firefox ise daha yalın standart özellikleri kullanır: scrollbar-color ve scrollbar-width. Üretilen kod ikisini de içerir; çubuğunuz her tarayıcıda tutarlı görünür.

Renkleri, genişliği ve yarıçapı ayarlayın; sağdaki önizleme alanı tasarımınız uygulanmış halde kayar, CSS anında güncellenir.

Sıkça Sorulan Sorular

Firefox'ta çubuk neden farklı görünüyor?

Firefox ::-webkit-scrollbar kurallarını yok sayar; yalnızca scrollbar-color (tutamaç + ray rengi) ve scrollbar-width'i uygular. Yarıçap ve hover efektleri WebKit'e özgüdür; Firefox sade bir sürüm gösterir.

Sadece tek bir öğenin çubuğunu biçimleyebilir miyim?

Evet — seçicileri kapsamlandırın: .kutum::-webkit-scrollbar { … } ve .kutum { scrollbar-color: … }. Tüm sayfa için html veya body'ye (ya da bu üreticinin çıplak seçicilerine) uygulayın.

Özel scrollbar mobilde çalışır mı?

Çoğunlukla hayır: iOS ve çoğu Android tarayıcı, bu stilleri yok sayan bindirmeli (overlay) çubuklar kullanır. Özel scrollbar'ı masaüstü süslemesi olarak düşünün.

Benzer Araçlar

CSS Gradient Oluşturucu Doğrusal, dairesel ve konik CSS degradelerini canlı önizlemeyle tasarlayın, kodu kopyalayın. Oluştur CSS Box Shadow (Gölge) Oluşturucu Kutu gölgesini görsel olarak tasarlayın — kaydırma, bulanıklık, yayılma, renk, opaklık ve inset — canlı önizlemeli. Oluştur CSS Border Radius Oluşturucu Köşeleri tek tek veya hep birlikte, px ya da % olarak yuvarlayın — canlı önizleme ve kopyalanabilir CSS. Oluştur CSS Text Shadow (Yazı Gölgesi) Oluşturucu Yazı gölgesini kaydırma, bulanıklık, renk ve opaklıkla tasarlayın — örnek metin üzerinde canlı önizleme. Oluştur