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çimlendirilmiştir. Bu yaklaşım Chrome ve Safari'de sorunsuz bir şekilde çalışır, ancak 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 itibarıyla desteklenmektedir.
Kaydırma çubukları 101
Kaydırma çubuğunun anatomisi
Kaydırma çubuğu, en azından bir parça ve bir başparmaktan oluşur. Parmağınızın hareket edebileceği alandır. Parça, tüm kaydırma mesafesini gösterir. Baş parmak, kaydırılabilir bölgedeki mevcut konumu gösterir. Siz kaydırdıkça parkur içinde hareket eder. Başparmak da genelde sürüklenebilir.
Kaydırma çubuklarının başparmak ve parçadan daha fazla bölümü olabilir. Ö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 bölümler, temel işletim sistemi tarafından belirlenir.
![Kaydırma çubuğunu oluşturan bölümlerin görseli.](https://developer.chrome.com/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-1.png?authuser=5&hl=tr)
Klasik ve yer paylaşımlı kaydırma çubukları
Kaydırma çubuklarının stilini nasıl belirleyeceğinize bakmadan önce, iki kaydırma çubuğu türü arasındaki farkı anlamanız önemlidir.
Yer paylaşımlı kaydırma çubukları
Yer paylaşımlı kaydırma çubukları, altındaki içeriğin üzerinde oluşturulan kayan kaydırma çubuklarıdır. Bunlar varsayılan olarak değil, yalnızca siz aktif olarak sayfayı kaydırırken gösterilir. Bunlar genellikle yarı şeffaftır, ancak içeriğin görünür olmaması için işletim sistemine bağlıdır. Etkileşimde bulunurken boyutları da değişebilir.
![Yer paylaşımlı kaydırma çubuğu olan bir tarayıcı görseli.](https://developer.chrome.com/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-2.png?authuser=5&hl=tr)
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ğil) ve bitişik içerikten biraz yer kaplar.
![Klasik kaydırma çubuğu olan bir tarayıcının resmi.](https://developer.chrome.com/static/docs/css-ui/scrollbar-styling/image/scrollbar-props-3.png?authuser=5&hl=tr)
scrollbar-color
ve scrollbar-width
özellikleri
scrollbar-color
ile kaydırma çubuklarına renk verme
scrollbar-color
özelliği, kaydırma çubuklarının renk şemasını değiştirmenize olanak tanır. Mülk, iki <color>
değerini kabul eder. İlk <color>
değeri başparmağının rengini, ikincisi ise parkur için kullanılacak rengi belirler.
.scroller {
scrollbar-color: hotpink blue;
}
Yer paylaşımlı kaydırma çubuğu kullanılırken, parçanın renginin varsayılan olarak herhangi bir etkisi yoktur. Bununla birlikte, kaydırma çubuğunun üzerine geldiğinizde parça görünür.
scrollbar-color
İşletim sistemi tarafından sağlanan varsayılan oluşturmayı kullanmak için 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 ince bir kaydırma çubuğunun 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 durumda.
scrollbar-width
değeri olarak 16px
gibi bir <length>
kullanılamaz.
.scroller {
scrollbar-width: thin;
}
Yer paylaşımlı kaydırma çubuğunu kullanırken, başparmak yalnızca kaydırılabilir alanı aktif olarak kaydırdığınız sırada çizilir.
scrollbar-width
Eski tarayıcı sürümlerini destekleme
scrollbar-color
ve scrollbar-width
özelliklerini desteklemeyen tarayıcı sürümlerine uyum sağlamak 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-*
yedeğiyle scrollbar-*
kullanarak kaydırma çubuklarına stil ekleme::-webkit-scrollbar
öğesinin width
veya height
değerini ayarladığınızda, her zaman bir yer paylaşımlı kaydırma çubuğunun gösterileceğini unutmayın. Bu çubuk, etkili bir şekilde klasik kaydırma çubuğuna dönüşür.
İllüzyonu korumak için renkleri yalnızca kaydırma çubuğu üzerine geldiğinizde 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. */
}
::-webkit-scrollbar-*
yedeğiyle birlikte scrollbar-*
kullanarak kaydırma çubuklarının stilini belirleme, fareyle üzerine gelindiğinde yalnızca ::-webkit-scrollbar-*
renkleri uygulanma