Bu scrollbar-gutterözellik, tarayıcının ekrandaki içerikle etkileşime giren bir kaydırma çubuğunu görüntülemek için kullandığı alanı belirleme esnekliği sağlar. Spesifikasyon, "kaydırma çubuğu için yer ayırmayı" açıklar ve bu mantıklıdır, çünkü nihayetinde bir oluk budur: içindeki her şey için yer ayıran ve onu diğer öğelerden ayıran bir kap.
Yani hepimiz aynı sayfadayız, bir kaydırma çubuğu, genellikle tarayıcının sağ tarafındaki (spesifikasyonda resmi olarak "kullanıcı aracısı" veya UA olarak anılır) toplama göre kaydırma konumunuzu gösteren şeydir web sayfasında kullanılabilir alan.
Bunlar geleneksel olarak kayan bir göstergeye sahip görsel bir kaptır. Bunlara klasik kaydırma çubukları denir . Gösterge oluğun içinde yer alır ve oluk görüntülendiğinde ekrandaki fiziksel alanı kaplar.
Son zamanlarda, kaydırma çubuğu görünümleri çok daha minimal bir şeye doğru yöneldi. Bunlara yer paylaşımlı kaydırma çubukları diyoruz ve bunlar, sayfa içeriğinin üstünde otururken kısmen veya tamamen şeffaftır. Başka bir deyişle, ekranda fiziksel alan kaplayan klasik kaydırma çubuklarından farklı olarak, yer paylaşımlı kaydırma çubukları ekran içeriğinin üstüne oturur.
Biz oradayken, başka yerlerde bir kaydırma çubuğu belirebilir. Tarayıcının sağında aynı hizada oturmanın yanı sıra, içeriğin öğeden taştığı ve overflowözelliğin (veya overflow-xve overflow-y) scrolldeğere ayarlandığı HTML öğelerinde kaydırma çubukları göreceğiz . Ve overflow-xdikey kaydırmaya ek olarak yatay kaydırmaya sahip olduğumuz araçların varlığına dikkat edin .
Biz bundan bahsediyoruz. Göstergenin kendisi değil, onu tutan kap. Bu oluk. Bir tarayıcının klasik veya yer paylaşımlı bir kaydırma çubuğu kullanması tamamen UA'nın kendisine bağlıdır. Bu bizim karar vermemiz için değil. Bu, kaydırma çubuğu genişliği için geçerlidir. Kullanıcı aracısı bunu tanımlar ve bize onun üzerinde hiçbir kontrol sağlamaz.
İşte burada scrollbar-gutterdevreye giriyor. Oluğun klasik ve kaplama varyasyonlarında mevcut olup olmadığını açıklayabiliriz.
Sözdizimi
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Çift ve işareti (&&), iki veya daha fazla bileşeni, tümü herhangi bir sırada olması gereken ayırır.
Soru işareti (?) , Önceki tür, kelime veya grubun isteğe bağlı olduğunu gösterir (sıfır veya bir kez oluşur).
Değerler
auto(başlangıç değeri): Şimdiye kadar açıklanan varsayılan davranış hemen hemen. Özelliğin bu değere ayarlanması, klasik kaydırma çubuklarınınoverflow, bu öğelerin özelliğininscrollveya olarak ayarlandığı öğelerde kullanıcı arayüzündeki gayrimenkulü tüketmesine izin verirauto. Tersine, bindirme kaydırma çubukları, öğenin üstüne oturarak hiç yer kaplamaz.stable: Buoverflow, aynı öğedeki özellikscrollveya olarak ayarlandığıautove kutu taşmasa bile klasik bir kaydırma çubuğuyla uğraştığımız sürece, kaydırma çubuğu oluğu için her zaman yer ayırarak biraz kararlı davranış ekler . Tersine, bunun bir kaplama kaydırma çubuğu üzerinde hiçbir etkisi olmayacaktır.always: Bu, aynı şekilde davranır,stableancak kaydırma çubuğunun klasik veya kaplama olmasına ve içeriğin taşıp taşmamasına bakılmaksızın, kaydırma çubuğu cilt payı için yerin her zaman ayrılmış olmasını sağlar.both: Bu, varsayılan cilt payı görüntülendiğinde öğenin her iki tarafına da bir kaydırma çubuğu oluğunun yerleştirileceğini belirtir. Tasarımınız, öğenin her iki tarafında da eşit boşluk gerektiriyorsa, bunun nasıl kullanışlı olabileceğini görebilirsiniz.forceBu, her iki uygulama ile aynıdırstablevealwayselemanın en buradaoverflowayarlanırauto,scroll,visible,hiddenya daclip.
Spesifikasyonun Çalışma Taslağı, klasik ve üst üste binen kaydırma çubuklarıyla olan ilişkilerini göstermek için bu tanımları bağlamlarına ayıran süper kullanışlı bir tabloya sahiptir.
| Klasik kaydırma çubukları | Yer paylaşımlı kaydırma çubukları | ||||
|---|---|---|---|---|---|
| taşma | kaydırma çubuğu oluğu | Taşan | Taşan değil | Taşan | Taşan değil |
| kaydırma | Oto | G | G | ||
| kararlı | GM | G | |||
| her zaman | G | G | G | G | |
| Oto | G | ||||
| kararlı | G | G | |||
| her zaman | G | G | G | G | |
| görünür, gizli, klip | Oto | ||||
| kararlı | f? | f? | |||
| her zaman | f? | f? | f? | f? | |
"G", kaydırma çubuğu oluğu için alan ayrılan durumları temsil eder, "f?" kuvvet belirtilmişse kaydırma çubuğu oluğu için alan ayrıldığı durumlar ve boşluk ayrılmadığı durumlarda boş hücreler.
Şartname Durumu
scrollbar-gutterMülkiyet Çalışma Taslak durumunda olan Taşma Modülü Level 4, tanımlanmıştır. Bu, bunun hala devam eden bir çalışma olduğu ve şimdiki ile taslağın Aday Tavsiyeye geçtiği zaman arasında değişebileceği anlamına gelir.
Taşma Modülü Seviye 3 spesifikasyonu da bir Çalışma Taslağıdır, bu nedenle bu, (1) scrollbar-gutterbir öneri haline gelmenin biraz zaman alacağını ve (2) hala çok fazla ilerleme olduğunu gösteren iyi bir göstergedir .
Tarayıcı Desteği
Son güncelleme sırasında tarayıcı desteği yoktur.
Daha fazla bilgi
- CSS Taşma Modülü Seviye 4 Çalışma Taslağı
- GitHub Sayı 92
- TPAC'daki CSS Çalışma Grubu: CSS'deki Yenilikler Neler? Özellik değerlerinin davranışını özetleyen tablo için elle çizilmiş bir öneri içerir.