Kaydırma çubuğu stili

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

Bramus

Giriş

Chrome 2. sürümünden itibaren kaydırma çubuklarını ::-webkit-scrollbar-* sözde öğeleriyle stilize etmek mümkün olmuştur. Bu yaklaşım Chrome ve Safari'de sorunsuz çalışır ancak CSS Çalışma Grubu tarafından hiçbir zaman standartlaştırılmamıştır.

CSS Kaydırma Çubukları Stili Modülü Düzey 1 Spesifikasyonu'nun bir parçası olan scrollbar-width ve scrollbar-color özellikleri standartlaştırılmıştır. Bu özellikler Chrome 121 sürümünden itibaren desteklenmektedir.

Kaydırma çubuklarına giriş

Kaydırma çubuğunun anatomisi

Kaydırma çubuğu en az bir iz ve bir başparmak içerir. İz, başparmağın hareket edebileceği alandır. Parça, kaydırma mesafesinin tamamını gösterir. Başparmak, kaydırılabilir bölgedeki mevcut konumu gösterir. Kaydırdıkça parça içinde hareket eder. Ayrıca, başparmak genellikle sürüklenebilir.

Ancak kaydırma çubukları, yalnızca başparmak ve izden daha fazla parçaya sahip olabilir. Örneğin, bir kaydırma çubuğunda kaydırma uzaklığını artırmak veya azaltmak için bir veya daha fazla düğme olabilir. Kaydırma çubuğunu oluşturan parçalar, temel işletim sistemine göre belirlenir.

Klasik ve yer paylaşımı kaydırma çubukları

Kaydırma çubuklarını nasıl stilize edeceğinizi incelemeden önce iki tür kaydırma çubuğu arasındaki farkı anlamanız önemlidir.

Kaydırma çubuklarını yer paylaşımı olarak görüntüleme

Yer paylaşımlı kaydırma çubukları, alttaki içeriğin üzerinde oluşturulan kayan kaydırma çubuklarıdır. Bu reklamlar varsayılan olarak gösterilmez, yalnızca aktif olarak kaydırırken gösterilir. Alttaki içeriğin görünür kalması için genellikle yarı saydamdırlar ancak bu, işletim sisteminin kararına bağlıdır. Bu kişilerle 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ç kenar ile dış dolgu kenarı arasındaki boşluktur. Bu kaydırma çubukları genellikle opak (şeffaf olmayan) olur 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. Özellik iki <color> değeri kabul eder. İlk <color> değeri, başparmağın rengini, ikinci değer ise parça için kullanılacak rengi belirler.

.scroller {
  scrollbar-color: hotpink blue;
}

Yer paylaşımı kaydırma çubuğu kullanıldığında, varsayılan olarak parçanın rengi etkili olmaz. Ancak kaydırma çubuğunun üzerine gelindiğinde parça gösterilir.

İşletim sistemi tarafından sağlanan varsayılan oluşturmayı kullanmak için değer olarak auto öğesini kullanın.

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

scrollbar-width özelliği, 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 kaydırma çubuğunun ince bir varyantı veya varsayılan platform kaydırma çubuğundan daha ince özel bir kaydırma çubuğu.
• none: Kaydırma çubuğunu etkili bir şekilde gizler. Ancak öğe kaydırılabilir olmaya devam eder.

scrollbar-width için değer olarak 16px gibi bir <length> kullanılamaz.

.scroller {
  scrollbar-width: thin;
}

Kaplama kaydırma çubuğu kullanırken başparmak yalnızca kaydırılabilir alanı etkin 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ümlerinde hem yeni scrollbar-* hem de ::-webkit-scrollbar-* özellikleri kullanılabilir.

.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 değerini ayarladığınızda, her zaman bir yer paylaşımı kaydırma çubuğu gösterilir. Bu da kaydırma çubuğunu klasik kaydırma çubuğuna dönüştürür.

İllüzyonu korumak için yalnızca kaydırma çubuğunun ü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. */
}