CSS Kaydırma Çubuğu Oluşturucu

Modern standart özellikler (2023 ve sonrası)

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

Tarayıcı desteği (2024):

• scrollbar-width: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-color: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-gutter: stable: Chrome 94+, Safari 14+, Firefox 97+. Gerek olmadığında bile kaydırma çubuğu boşluğunu ayırarak yerleşim kaymasını önler.

Webkit sözde öğeleri (Chrome, Safari, eski Edge)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

Daha ayrıntılı denetim. width, dikey kaydırma çubuğunun genişliğini; height ise yatay kaydırma çubuğunun yüksekliğini ayarlar. Her iki yönde de kaydırılabilen kapsayıcılar için ikisini de ekleyin.

İki yaklaşımı art arda uygulayın

Önce modern kuralları, ardından her ikisini de işleyen tarayıcılar için bir geliştirme olarak webkit kurallarını belirtin:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefox yalnızca modern scrollbar-* kurallarını dikkate alır. Chrome ve Safari, webkit kurallarını dikkate alır (bunlar modern kuralları geçersiz kılar, böylece davranış tutarlı kalır).

scrollbar-gutter içeriğin kaymasını önler

Ayrılmış bir boşluk olmadan, kaydırma çubuğu göründüğünde içerik yeniden akar (dinamik listelerde sık görülür). Çözüm:

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

İçerik kaysa da kaymasa da kaydırma çubuğu yuvası ayrılır. both-edges, içeriği görsel olarak ortalamak için karşı tarafa eşleşen bir boşluk ekler.

Kaydırma çubuklarını tamamen gizleme

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

Dikkatli olun: kaydırma çubuğunu gizlemek, kullanıcıların içeriğin kaydırılabildiğini görmesini engeller. Yalnızca net bir gösterge ile (oklar, sayfa noktaları) veya kaydırma davranışı bağlamdan açıkça anlaşıldığında (yatay taşıyıcılar, sohbet geçmişleri) kullanın.

Mobil için dikkat edilecekler

iOS ve Android’de kaydırma çubukları yalnızca kaydırma sırasında bir an görünür. Özel kaydırma çubuğu CSS’iniz yine de uygulanır, ancak kullanıcılar onu bir saniyeden fazla göremeyebilir. Buna göre tasarlayın: nadiren görünen görsel süslemelere fazla yatırım yapmayın.

Erişilebilirlik

• Kontrast: sürgünün ize göre kontrastı, metin dışı kontrast için 3:1 oranını karşılamalıdır (WCAG 1.4.11).
• Genişlik: ince kaydırma çubuklarını fareyle kavramak zor olabilir; özellikle motor bozukluğu olan kullanıcılar için. Normal genişlik daha güvenli bir varsayılandır.
• Kaydırılabilir bölgelerde kaydırma çubuğunu asla kaldırmayın ve başka bir kaydırma yolu sunmayın. Kaydırma çubuğuna bağımlı kullanıcılar aksi hâlde takılıp kalır.