Kaydırma sabitleme konumlarını bildirerek iyi kontrol edilen kaydırma deneyimleri oluşturun.
CSS Kaydırma Sabitlemesi özelliği, web geliştiricilerine kaydırma sabitleme konumlarını bildirerek iyi kontrol edilen kaydırma deneyimleri oluşturma olanağı sunar. Sayfalara ayrılmış makaleler ve resim bantları, bu tür içeriklerin yaygın olarak kullanılan iki örneğidir. CSS Scroll Snap, bu popüler kullanıcı deneyimi kalıplarını oluşturmak için kullanımı kolay ve tutarlı bir API sunar.
Arka plan
Kaydırma sabitleme özelliğinin avantajları
Kaydırma, web'deki içerikle etkileşim kurmanın popüler ve doğal bir yoludur. Platformun bir kerede ekranda görünenden daha fazla bilgiye erişim sağlayan doğal bir yöntemidir. Bu, sınırlı ekran alanının bulunduğu mobil platformlarda özellikle hayati önem taşır. Dolayısıyla, web yazarlarının içeriği her geçen gün derin hiyerarşiler yerine kaydırılabilir düz listeler halinde düzenlemeyi tercih etmeleri şaşırtıcı değildir.
Kaydırmanın temel dezavantajı hassasiyetin olmamasıdır. Ekran kaydırma işleminin bir paragraf veya cümleyle hizalanması nadirdir. Bu durum, sayfanın veya resmin ortasında kaydırma işlemi sona erdiğinde ve içerik kısmen görünür kaldığında, anlamlı sınırları olan sayfalara ayrılmış veya listelenmiş içeriklerde daha da belirgindir. Bu kullanım alanları, iyi kontrol edilen bir kaydırma deneyiminden yarar sağlar.
Web geliştiricileri uzun süredir bu eksikliği gidermek amacıyla kaydırmayı kontrol etmek için JavaScript tabanlı çözümlere güveniyor. Ancak JavaScript tabanlı çözümler, kaydırma özelleştirmesi için temel öğelerin olmaması veya birleştirilmiş kaydırmaya erişim olmaması nedeniyle tam doğruluk sağlayan bir çözüm sunamaz. CSS Scroll Snap, tarayıcılar arasında tutarlı olarak çalışan hızlı, son derece kaliteli ve kullanımı kolay bir çözüm sağlar.
CSS Scroll Snap, web yazarlarının her kaydırma kapsayıcısını, kaydırma işlemlerinin sona ereceği sınırlarla işaretlemelerine olanak tanır. Tarayıcılar daha sonra kaydırma işleminin ayrıntılarına, kaydırma kapsayıcısının düzenine ve görünürlüğüne, sabitleme konumlarının ayrıntılarına bağlı olarak en uygun bitiş konumunu seçer ve ardından bu konuma sorunsuz bir şekilde animasyonla gider. Önceki örneğimize dönecek olursak, kullanıcı bandı kaydırmayı tamamladığında, görünür resim yerine oturur. JavaScript'in kaydırma ayarlaması yapması gerekmez.
CSS Kaydırma Kilidi
Kaydırma sabitleme, kaydırma işlemi sona erdiğinde kaydırma kapsayıcının kaydırma ofsetini tercih edilen bir sabitleme konumuna ayarlama işlemidir.
scroll-snap-type özelliği kullanılarak kaydırma kapsayıcısında kaydırma sabitleme etkinleştirilebilir. Bu, tarayıcıya bu kaydırma kapsayıcısını alt öğeleri tarafından oluşturulan sabitleme konumlarına sabitlemeyi düşünmesi gerektiğini söyler. scroll-snap-type, kaydırma işleminin gerçekleştiği ekseni (x, y veya both) ve sabitleme sıkılığını (mandatory, proximity) belirler. Bu konu hakkında daha sonra daha fazla bilgi vereceğiz.
Tutturma konumu, bir öğe üzerinde istenen hizalama bildirilerek oluşturulabilir.
Bu konum, en yakın üst öğe kapsayıcının ve öğenin belirli bir eksen için belirtilen şekilde hizalandığı kaydırma ofsetidir. Her eksende şu hizalamalar mümkündür: start, end, center.
start hizalaması, kaydırma kapsayıcısı anlık bağlantı başlangıç kenarının, öğe tutturma alanı başlangıç kenarıyla aynı hizada olması gerektiği anlamına gelir. Benzer şekilde, end ve center hizalamaları, kaydırma kapsayıcısı anlık bağlantı noktası uç kenarının veya merkezinin, öğe geçme alanının bitiş kenarı veya ortasıyla aynı hizalanması gerektiği anlamına gelir.
Aşağıdaki örneklerde bu kavramların nasıl kullanılacağı gösterilmektedir.
Örnek: Yatay galeri
Kaydırmayla sabitleme özelliğinin yaygın kullanım alanlarından biri resim bandıdır. Örneğin, siz kaydırdıkça her resme tutturulan bir yatay resim bandı oluşturmak için kaydırma kapsayıcısını yatay eksende zorunlu bir scroll-snap-type öğesine sahip olacak şekilde belirtebiliriz. Her bir resmi scroll-snap-align: center değerine ayarlayarak, tutturma işleminin görüntünün bant içinde ortalanmasını sağlayabiliriz.
#gallery {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
#gallery img {
scroll-snap-align: center;
}
<div id="gallery">
<img src="cat.jpg">
<img src="dog.jpg">
<img src="another_cute_animal.jpg">
</div>
Tutturma konumları bir öğeyle ilişkilendirildiğinden, öğe ve kaydırma kapsayıcı boyutu dikkate alındığında yapışma algoritmasının ne zaman ve nasıl tutturulacağı konusunda akıllı davranabilir. Örneğin, bir resmin banttan daha büyük olduğu durumu göz önünde bulundurun. Naif bir yapışma algoritması, kullanıcının resmin tamamını görmek için etrafta gezinmesini engelleyebilir. Ancak özellik, bu durumu algılayan ve kullanıcının yalnızca kenarlarına dokunarak söz konusu resimde serbestçe kaydırmasına olanak tanıyan uygulamalar gerektirir.
Örnek: Bir ürün yolculuğu sayfası
Kaydırarak tutturma işlevinden yararlanabilen başka bir yaygın durum da dikey olarak kaydırılabilen birden fazla mantıksal bölüme sahip sayfalardır (ör. tipik bir ürün sayfası). scroll-snap-type: y proximity; bunun gibi durumlar için daha doğal bir tercihtir. Bu özellik, kullanıcı sayfayı kaydırarak belirli bir bölümün ortasına kaydırdığında engel olmaz ancak ekranı yeterince yakına kaydırdığında yeni bir bölüme tutturur ve dikkati yeni bir bölüme çeker.
Bunu şu şekilde yapabilirsiniz:
article {
scroll-snap-type: y proximity;
/* Reserve space for header plus some extra space for sneak peeking. */
scroll-padding-top: 15vh;
overflow-y: scroll;
}
section {
/* Snap align start. */
scroll-snap-align: start;
}
header {
position: fixed;
height: 10vh;
}
<article>
<header> Header </header>
<section> Section One </section>
<section> Section Two </section>
<section> Section Three </section>
</article>
Dolgu ve kenar boşluğunu kaydırma
Ürün sayfasında sabit konumlu bir üst başlık var. Tasarım, kullanıcılara yukarıdaki içerik hakkında tasarım ipucu vermek için kaydırma kapsayıcısı yerleştirildiğinde üst bölümün görünür kalmasını da istedi.
scroll-padding özelliği, kaydırma kapsayıcısının veya anlık bağlantı öğesinin etkili görüntülenebilir bölgesini ayarlamak için kullanılabilen yeni bir css özelliğidir. Bu özellik, kaydırma tutturma hizalamalarını hesaplarken kullanılır. Bu özellik, kaydırma kapsayıcısının dolgu kutusuna karşı bir içe yerleştirilme tanımlar. Örneğimizde, en üste 15vh ek içe aktarma işlemi uygulanmıştır. Bu şekilde, tarayıcıya, kaydırma kapsayıcısının dikey başlangıç kenarı olarak, kaydırma kapsayıcısının üst kenarının 15vh altında olan daha düşük bir konumu dikkate alması talimatı verilir. Tutturma sırasında, tutturma hedef öğesinin başlangıç kenarı, bu yeni konumla aynı hizaya gelir ve böylece yukarıda boşluk bırakılır.
scroll-margin
mülkünde, scroll-padding'ın sabit kaydırma kapsayıcısında işleyiş şekline benzer şekilde sabitleme hedefinin etkili kutusunu ayarlamak için kullanılan başlangıç miktarı tanımlanır.
Bu iki mülkte "snap" kelimesinin bulunmadığını fark etmiş olabilirsiniz. Bu, ilgili tüm kaydırma işlemleri için kutuyu değiştirdikleri ve yalnızca kaydırma sabitlemesi yapmadıkları için bilinçli olarak yapılır. Örneğin, Chrome; Sayfa Aşağı ve Sayfa Yukarı gibi sayfa kaydırma işlemleri için sayfa boyutunu hesaplarken ve Element.scrollIntoView() işlemi için kaydırma miktarını hesaplarken bunları hesaba katar.
Diğer kaydırma API'leriyle etkileşim
DOM Kaydırma API'sı
Kaydırma tutturma, komut dosyası tarafından başlatılanlar da dahil olmak üzere tüm kaydırma işlemlerinden sonra gerçekleşir. Element.scrollTo gibi API'leri kullandığınızda tarayıcı, işlemin istenen kaydırma konumunu hesaplar ve ardından nihai sabitleme konumunu bulmak için uygun sabitleme mantığını uygular. Dolayısıyla, kullanıcı komut dosyasının tutturma için manuel hesaplama yapmasına gerek yoktur.
Kolay kaydırma
Düz kaydırma, programatik kaydırma işleminin davranışını kontrol ederken kaydırma hareketi, kaydırma işleminin hedefini belirler. Kaydırma işleminin dik açıdaki yönlerini kontrol ettikleri için birlikte kullanılabilir ve birbirlerini tamamlayabilirler.
Fazla kaydırma davranışı
OverscrollBehavior API, kaydırmanın birden çok öğe arasında nasıl zincirlendiğini kontrol eder ve kaydırma tutturmasından etkilenmez.
Uyarılar ve en iyi uygulamalar
Hedef öğeler arasında geniş bir boşluk varken zorunlu tutturmayı kullanmaktan kaçının. Bu durum, sabitleme konumları arasındaki içeriğe erişilememesine neden olabilir.
Kaydırma tutturma, çoğu durumda özellik algılamaya gerek kalmadan bir geliştirme olarak eklenebilir.
Gerekirse CSS Scroll Snap desteğini algılamak için @supports veya CSS.supports kullanın.
Kullanımdan kaldırılan spesifikasyonda da bulunan scroll-snap-type değerini kullanmaktan kaçının.
CSS'de özellik algılama
@supports (scroll-snap-align: start) {
article {
scroll-snap-type: y proximity;
scroll-padding-top: 15vh;
overflow-y: scroll;
}
}
JavaScript'te özellik algılama
if (CSS.supports('scroll-snap-align: start')) {
// use css scroll snap
} else {
// use fallback
}
Element.scrollTo gibi programatik kaydırma API'lerinin her zaman istenen kaydırma ofsetinde tamamlandığını varsaymayın. Kaydırma tutturma, programatik kaydırma tamamlandıktan sonra kaydırma ofsetini ayarlayabilir. Kaydırma işlemi başka nedenlerle kesintiye uğramış olabileceğinden, kaydırma anında duraklatma özelliğinden önce bile bunun iyi bir varsayım olmadığını unutmayın. Bu durum özellikle kaydırma anında duraklatma özelliğinde geçerlidir.
Gelecekteki işler
Kaydırma deneyimi, Chrome ekibi tarafından yakın zamanda
yapılan bir anketin odak noktasıydı.
Anket sonuçları, eklenti kitaplıkları ile CSS arasındaki boşluğu kapatmak için ek çalışma gerektiren çeşitli alanlar belirledi.
Yaklaşan çalışmalarda scroll-snap'ye odaklanılacak. Bu çalışmalar arasında şunlar yer alıyor:
- API'nin kullanılabilirliği ve tarayıcılar arası uyumluluk.
scroll-startgibi yeni CSS API'leri üzerinde çalışın.snapChanged()gibi yeni JS etkinlikleri üzerinde çalışın.