Kaydırma çubuğu stili

Kaydırma çubuklarının stilini belirlemek için scrollbar-width ve scrollbar-color özelliklerini kullanın.

Bramus

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. */
}