Özel Kaydırma Çubuğu

Bu araç ne işe yarar?

Scrollbar Üreticisi, özel kaydırma çubuğu CSS'ini görsel olarak oluşturmanızı sağlar: genişlik, köşe yarıçapı ve iz, başparmak ile başparmak-hover renklerini ayarlayın, kodu anında alın. Web tasarımcıları ve önyüz geliştiricileri için, hem WebKit hem de Firefox için hazır çıktı üretir.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

WebKit ve Firefox uyumlu çıktı

Üretilen kod iki bölümden oluşur: Chrome, Safari ve Edge için ::-webkit-scrollbar sözde öğeleri ve Firefox için scrollbar-width ile scrollbar-color özellikleri. Böylece tek bir kopyalamayla tüm modern tarayıcılarda tutarlı bir görünüm elde edersiniz. Firefox yalnızca ince kalınlık ve iki renk desteklediği için araç başparmak ve iz renklerinizi otomatik olarak o tarafa eşler, ayrı ayarlama yapmanıza gerek kalmaz.

Canlı önizleme ile tasarlayın

Renk seçicileri ve kaydırıcıları her oynattığınızda, üstteki kaydırılabilir kutu yeni stilinizi anında yansıtır. Bu sayede genişlik ve köşe yarıçapı kombinasyonlarını gerçek bir kaydırma çubuğunda görerek ayarlayabilirsiniz. Yalnızca WebKit önizlemede gösterilir; ancak kopyaladığınız CSS hem Firefox hem WebKit kurallarını içerir, dolayısıyla projenize yapıştırdığınızda her iki tarayıcıda da çalışır.

Sıkça sorulan sorular

Üretilen CSS'i nasıl belirli bir öğeye uygularım?

Çıktıdaki ::-webkit-scrollbar seçicilerinin önüne kendi seçicinizi (örn. .panel) ekleyin: .panel::-webkit-scrollbar { ... }. Firefox tarafında ise scrollbar-color ve scrollbar-width özelliklerini doğrudan o öğenin kuralına yazın.

Neden Firefox'ta köşe yarıçapı uygulanmıyor?

Firefox kaydırma çubuğu için yalnızca scrollbar-width (auto/thin) ve scrollbar-color destekler; başparmak köşe yarıçapı veya hover rengi gibi ince ayarlar desteklenmez. Bu özellikler yalnızca WebKit tarayıcılarda görünür.

Genişlik kaydırıcısının üst sınırı neden 24px?

24px, masaüstünde dokunmatik için bile rahat bir maksimum kalınlıktır; daha geniş çubuklar içerik alanını gereksiz daraltır. Yatay ve dikey çubukların ikisi de aynı genişlik/yükseklik değerini kullanır.