CSS kaydırma çubuğu stili oluşturucu
Özel ::-webkit-scrollbar ve scrollbar-width/scrollbar-color CSS kuralları oluşturun.
CSS kaydırma çubuğu stili oluşturucu
Varsayılan tarayıcı kaydırma çubuğu, nadiren tasarımın geri kalanıyla eşleşir ve stilini belirlemek, aynı anda iki farklı spesifikasyonu hatırlamak anlamına gelir: Chrome, Safari ve Edge'in kullandığı WebKit ::-webkit-scrollbar sözde-elemanları ve Firefox'un okuduğu standart scrollbar-width/scrollbar-color özellikleri. Bu araç, birkaç seçenekten her ikisini de aynı anda oluşturur, böylece bir CSS bloğu kopyalayabilir ve her ana tarayıcı eşleşen bir kaydırma çubuğu görüntüler.
Hedef seçiciyi ayarlayın — tüm sayfa için body veya .sidebar gibi bir sınıf bir kaydırılabilir panel için — ardından kaydırma çubuğunun genişliğini piksel cinsinden, parça ve küçük resim renklerini ve küçük resmin üzerinde geçtiği rengi seçin. Küçük resim yuvarlaklığı, sürüklenebilir çubuğun border-radius'unu kontrol eder ve iç sınır, küçük resim ile parça arasına saydam bir boşluk ekleyerek, katı bir blok yerine kayan bir hap olarak görünür. Varyant seçeneği, tarayıcının normal kaydırma çubuğu, daha ince bir "İnce" ve -ms-overflow-style ve scrollbar-width: none kullanarak kaydırma çubuğunu tamamen kaldıran "Gizli" arasında geçiş yapar, öğenin kendi kaydırması etkilenmez.
Koyu mod varyantını açmak, kuralların ikinci bir kopyasını @media (prefers-color-scheme: dark) bloğuna sarar, parça ve küçük resim renkleri otomatik olarak koyulaştırılır, böylece zaten temaları değiştiren bir site, onunla değişen bir kaydırma çubuğu alır — ek hesaplamaya gerek yoktur. Her seçenek, siz ayarlarken çıktıyı gerçek zamanlı olarak günceller ve sonucun altındaki sayı, kaç CSS kural bloğunun oluşturulduğunu ve tam karakter sayısını gösterir.
Her şey yerel olarak tarayıcınızda çalışır: hiçbir seçici, renk veya CSS hiçbir zaman bir sunucuya gönderilmez. Sonucu doğrudan stil sayfanıza kopyalayın, .txt dosyası olarak indirin veya daha fazla iyileştirme için başka bir aracın giriş alanına gönderin.