Kaydırma çubuğu stili

Kaydırma çubuklarına stil uygulamak için scrollbar-width ve scrollbar-color özelliklerini kullanın.

Bramus

Giriş

Chrome 2 sürümünden itibaren kaydırma çubuklarına ::-webkit-scrollbar-* sözde öğeleriyle stil verilebilir. 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 hâle getirildi. Bu mülkler Chrome 121'den itibaren desteklenmektedir.

Tarayıcı desteği

• 121
• 121
• 64
• x

Kaynak

Kaydırma çubukları hakkında

Kaydırma çubuğunun anatomisi

Kaydırma çubuğu, en azından bir parça ve bir başparmaktan oluşur. Parmak kaydırma çubuğu, başparmağı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. Kaydırırken parça içinde hareket eder. Başparmak genellikle sürüklenebilir.

Ancak kaydırma çubuklarında kaydırma çubuğu ve kaydırma çubuğu yuvası dışında başka parçalar da bulunabilir. Örneğin, kaydırma çubuğunda kaydırma ofsetini artıran veya azaltan 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 parçaları gösteren görsel. Sol taraftaki çizimde yalnızca bir parça ve başparmak bulunan sade bir kaydırma çubuğu yer alıyor. Sağ taraftaki de düğmelere sahip.

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 kaydırırken gösterilir. Alttaki içeriğin görünür kalması için genellikle yarı saydam olurlar ancak buna karar vermek işletim sistemine bağlıdır. Bu öğelerle etkileşimde bulunurken boyutları da değişebilir.

Yer paylaşımlı kaydırma çubuğu bulunan bir tarayıcı görseli. Kaydırma çubuğu içeriğin üzerini kapatıyor; başparmak kısmen şeffaf.

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 kenarı, iç kenarlığın kenarı ile dış dolgu kenarının arasındaki boşluktur. Bu kaydırma çubukları genellikle opaktır (şeffaf değildir) ve bitişik içerikten yer kaplar.

Klasik kaydırma çubuğuna sahip bir tarayıcı resmi. Kaydırma çubuğu, içeriğin yanında kendi özel alanında konumlandırılır. İçeriğin kullanılabilir genişliği, yer paylaşımlı kaydırma çubukları kullanıldığındaki kullanılabilir genişliğe kıyasla küçülür.

scrollbar-color ve scrollbar-width özellikleri

scrollbar-color ile kaydırma çubuklarına renk verme

scrollbar-color mülkü, kaydırma çubuklarının renk şemasını değiştirmenize olanak tanır. Mülk, iki <color> değeri kabul eder. İlk <color> değeri küçük resmin 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 parça renginin varsayılan olarak herhangi bir etkisi yoktur. Ancak fareyle kaydırma çubuğunun üzerine geldiğinizde parça gösterilir.

Demo: Kaydırma Çubuklarının Stilini Belirleme: scrollbar-color

İşletim sistemi tarafından sağlanan varsayılan oluşturma işlemini kullanmak için değeri auto olarak ayarlayın.

scrollbar-width ile kaydırma çubuğunun boyutunu değiştirme

scrollbar-width mülkü, daha dar bir kaydırma çubuğu seçmenize veya kaydırma özelliğini etkilemeden kaydırma çubuğunu tamamen gizlemenize olanak tanır.

Kabul edilen değerler auto, thin ve none'dir.

• 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ğu 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 kaydırılabilir durumda kalır.

scrollbar-width değeri olarak 16px gibi bir <length> kullanılamaz.

.scroller {
  scrollbar-width: thin;
}

Yer paylaşımlı kaydırma çubuğu kullanılırken başparmak yalnızca kaydırılabilir alanı etkin olarak kaydırırken çizilir.

Demo: Kaydırma Çubuklarının Stilini Belirleme: scrollbar-width

Eski tarayıcı sürümlerini destekleme

scrollbar-color ve scrollbar-width'ü desteklemeyen tarayıcı sürümlerini karşılamak için hem yeni scrollbar-* hem de ::-webkit-scrollbar-* mülklerini 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);
    }
}

Demo: ::-webkit-scrollbar-* yedeğiyle scrollbar-* kullanarak kaydırma çubuklarının stilini belirleme

::-webkit-scrollbar öğesinin width veya height özelliğini ayarlarken her zaman bir yer paylaşımlı kaydırma çubuğunun gösterildiğini ve bu özelliğin öğeyi klasik bir kaydırma çubuğuna dönüştürdüğünü unutmayın.

Yanılsamanın devam etmesini istiyorsanız renklerin yalnızca kaydırma çubuğunun üzerine gelindiğinde değişmesini 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. */
}

Demo: ::-webkit-scrollbar-* yedeğiyle birlikte scrollbar-* kullanarak kaydırma çubuklarının stilini belirleme, fareyle üzerine gelindiğinde yalnızca ::-webkit-scrollbar-* renkleri uygulanma