Kaydırma çubuklarının stilini belirlemek için scrollbar-width
ve scrollbar-color
özelliklerini kullanın.
Giriş
Chrome sürüm 2'den itibaren kaydırma çubukları ::-webkit-scrollbar-*
sözde öğeleriyle biçimlendirilebilir. Bu yaklaşım Chrome'da ve Safari'de sorunsuz şekilde çalışsa da CSS Çalışma Grubu tarafından hiçbir zaman standart hale getirilmemiştir.
CSS Kaydırma Çubukları Stil Modülü Düzey 1 Spesifikasyonu'nun bir parçası olan scrollbar-width
ve scrollbar-color
özellikleri standart hale getirildi. Bu özellikler Chrome 121'den itibaren desteklenmektedir.
Kaydırma çubukları 101
Kaydırma çubuğunun anatomisi
Kaydırma çubuğu, en azından bir kanal ve baş parmaktan oluşur. Parkur, başparmağın hareket edebildiği alandır. Parça, kaydırma mesafesinin tamamını temsil eder. Başparmak, kaydırılabilir bölgedeki mevcut konumu gösterir. Siz kaydırdıkça parça içinde hareket eder. Baş parmak da çoğu zaman sürüklenebilir.
Bununla birlikte, kaydırma çubuklarında yalnızca küçük parmak izi ve izleme işlevinden daha fazla parça bulunabilir. Örneğin, bir kaydırma çubuğunda kaydırma ofsetini artırmak veya azaltmak için bir veya daha fazla düğme bulunabilir. Kaydırma çubuğunu oluşturan parçalar, temel işletim sistemi tarafından belirlenir.
Klasik ve yer paylaşımlı kaydırma çubukları
Kaydırma çubuklarının stilini nasıl ayarlayacağınızı anlamadan önce iki kaydırma çubuğu türü arasındaki farkı anlamak önemlidir.
Yer paylaşımlı kaydırma çubukları
Yer paylaşımlı kaydırma çubukları, altındaki içeriğin en üstünde oluşturulan kayan kaydırma çubuklarıdır. Varsayılan olarak gösterilmezler. Yalnızca sayfayı kaydırırken gösterilirler. Alttaki içeriğin görünür olmasını sağlamak için genellikle yarı şeffaf olurlar ancak buna karar vermek işletim sistemine bağlıdır. Onlarla etkileşimde bulunurken boyutları da değişebilir.
Klasik kaydırma çubukları
Klasik kaydırma çubukları, özel bir kaydırma çubuğu oluğuna yerleştirilen kaydırma çubuklarıdır. Kaydırma çubuğu oluğu, iç kenarlık kenarı ile dış dolgu kenarı arasındaki boşluktur. Bu kaydırma çubukları genellikle opaktır (şeffaf değildir) ve bitişikteki içerikten bir miktar yer kaplar.
scrollbar-color
ve scrollbar-width
özellikleri
scrollbar-color
ile kaydırma çubuklarının rengini verme
scrollbar-color
özelliği, kaydırma çubuklarının renk şemasını değiştirmenize olanak tanır. Bu mülk iki <color>
değeri kabul eder. İlk <color>
değeri, başparmağın rengini, ikincisi ise parça için kullanılacak rengi belirler.
.scroller {
scrollbar-color: hotpink blue;
}
Yer paylaşımlı kaydırma çubuğu kullanılırken parkurun renginin varsayılan olarak herhangi bir etkisi olmaz. Ancak, kaydırma çubuğunun üzerine geldiğinizde parkur gösterilir.
İşletim sisteminin sağladığı varsayılan oluşturma işlemini kullanmak için değer olarak auto
değerini kullanın.
scrollbar-width
ile kaydırma çubuğunun boyutunu değiştirme
scrollbar-width
özelliği, daha dar bir kaydırma çubuğu seçmenize, hatta kaydırılabilirliği etkilemeden kaydırma çubuğunu tamamen gizlemenize olanak tanır.
Kabul edilen değerler: auto
, thin
ve none
.
auto
: Platform tarafından sağlanan varsayılan kaydırma çubuğu genişliği.thin
: Platform tarafından sağlanan kaydırma çubuğunun ince bir varyantı veya varsayılan platform kaydırma çubuğundan daha ince bir özel kaydırma çubuğu.none
: Kaydırma çubuğunu etkili bir şekilde gizler. Ancak öğe hâlâ kaydırılabilir.
scrollbar-width
değeri olarak 16px
gibi bir <length>
kullanılamaz.
.scroller {
scrollbar-width: thin;
}
Yer paylaşımı kaydırma çubuğu kullanılırken başparmak yalnızca siz kaydırılabilir alanı etkin bir şekilde kaydırırken çizilir.
Eski tarayıcı sürümlerini destekleme
scrollbar-color
ve scrollbar-width
'yi desteklemeyen tarayıcı sürümlerinin ihtiyaçlarına cevap vermek için hem yeni scrollbar-*
hem de ::-webkit-scrollbar-*
özelliklerini kullanabilirsiniz.
.scroller {
--scrollbar-color-thumb: hotpink;
--scrollbar-color-track: blue;
--scrollbar-width: thin;
--scrollbar-width-legacy: 10px;
}
/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
.scroller {
scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
scrollbar-width: var(--scrollbar-width);
}
}
/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
.scroller::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller::-webkit-scrollbar {
max-width: var(--scrollbar-width-legacy);
max-height: var(--scrollbar-width-legacy);
}
}
::-webkit-scrollbar
için width
veya height
ayarladığınızda, her zaman yer paylaşımlı bir kaydırma çubuğu görüntülenecek ve bu çubuk etkin bir şekilde klasik bir kaydırma çubuğuna dönüşecektir.
İllüzyonu korumak için yalnızca kaydırıcının üzerine gelindiğinde renkleri değiştirmeyi seçebilirsiniz.
.scroller::-webkit-scrollbar-thumb {
background: transparent;
}
.scroller::-webkit-scrollbar-track {
background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller:hover {
--fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}