Kaydırma çubuğunun rengini veya kalınlığını özelleştirme

Web özellikleri: scrollbar-color scrollbar-width

Standart CSS özellikleri scrollbar-color ve scrollbar-width'yi kullanarak kaydırma çubuklarının görünümünü özelleştirebilirsiniz.

  • scrollbar-color: İki <color> değeri kabul eder. İlki kaydırma çubuğu (hareketli kısım), ikincisi ise kanal (sabit arka plan) için geçerlidir.
  • scrollbar-width: auto (varsayılan), thin (daha ince bir varyant) veya none (kaydırma özelliğini korurken kaydırma çubuğunu tamamen gizler) değerlerini kabul eder.

scrollbar-color ve scrollbar-width uygulayın

ZORUNLU: Kaydırılabilir kapsayıcıda scrollbar-color ve scrollbar-width kullanın.

scrollbar-color kullanırken okunabilirlik ve sürdürülebilirlik için (özellikle yedekleri kullanırken) kaydırma çubuğu ve kaydırma yolu renklerini ayrı tutmak amacıyla CSS değişkenlerini kullanın.

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

Yedek stratejiler

scrollbar-color için yedekler ve tarayıcı desteği

Bu özellik progresif geliştirme olup her zaman yedek gerektirmez.

Stil önemliyse ve kullanıcının Baseline hedefi "Baseline Widely Available" veya daha eskiyse standart olmayan ::-webkit-scrollbar sözde öğelerini yedek olarak eklemeniz GEREKİR.

Hem standart özellikleri hem de eski WebKit seçicileri yerel olarak destekleyen tarayıcılarda bu ikisi arasında çakışma olmasını önlemek için eski yedekleri bir @supports not (scrollbar-color: auto) bloğuna sarmalayın.

Renkleri tanımlamak için özel özellikler kullanıyorsanız bunlar otomatik olarak eski WebKit seçicilere uygulanır. Bunları kopyalamanız GEREKMEZ.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}