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ç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.

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.

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.

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.

İş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.

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