Kaydırarak tutturma konumlarını bildirerek iyi kontrol edilen kaydırma deneyimleri oluşturun.
CSS kaydırarak tutturma özelliği, web geliştiricilerinin kaydırarak tutturma konumlarını bildirerek iyi kontrol edilen kaydırma deneyimleri oluşturmasına olanak tanır. Sayfalandırılmış makaleler ve resim bantları, bunun en çok tercih edilen iki örneğidir. CSS kaydırarak tutturma, bu popüler kullanıcı deneyimi kalıplarını oluşturmak için kullanımı kolay ve tutarlı bir API sağlar.
Arka plan
Kaydırarak tutturma neden önemlidir?
Kaydırma, web'deki içeriklerle etkileşim kurmanın popüler ve doğal bir yoludur. Bu, platformun ekranda aynı anda görünenlerden daha fazla bilgiye erişim sağlamanın yerel yoludur ve özellikle sınırlı ekran alanına sahip mobil platformlarda hayati önem taşır. Bu nedenle, web yazarlarının içeriği derin hiyerarşiler yerine kaydırılabilir düz listeler halinde düzenlemeyi tercih etmesi şaşırtıcı değildir.
Kaydırmanın en büyük dezavantajı, hassas olmamasıdır. Kaydırma işlemi nadiren bir paragraf veya cümleyle hizalanmış şekilde biter. Bu durum, kaydırma işlemi sayfanın veya resmin ortasında bittiğinde ve kısmen görünür kaldığında, anlamlı sınırlara sahip sayfalandırılmış veya maddeler halinde listelenmiş içeriklerde daha belirgin olur. Bu kullanım alanları, iyi kontrol edilen bir kaydırma deneyiminden yararlanır.
Web geliştiricileri, bu eksikliği gidermek için kaydırmayı kontrol etmek amacıyla uzun süredir JavaScript tabanlı çözümlerden yararlanıyor. Ancak JavaScript tabanlı çözümler, kaydırma özelleştirme temellerinin veya birleştirilmiş kaydırmaya erişimin olmaması nedeniyle tam doğrulukta bir çözüm sunamaz. CSS kaydırarak tutturma, tarayıcılar arasında tutarlı bir şekilde çalışan hızlı, aslına uygun ve kullanımı kolay bir çözüm sunar.
CSS kaydırarak tutturma, web yazarlarının her kaydırma kapsayıcısını kaydırma işlemlerinin tamamlanacağı sınırlarla işaretlemesine olanak tanır. Tarayıcılar daha sonra kaydırma işleminin özelliklerine, kaydırma kapsayıcısının düzenine ve görünürlüğüne ve sabitleme konumlarının ayrıntılarına bağlı olarak en uygun bitiş konumunu seçer ve ardından sorunsuz bir şekilde animasyon uygular. Önceki örneğimize dönersek kullanıcı, bandı kaydırmayı bitirdiğinde görünür resim yerine oturur. JavaScript tarafından kaydırma ayarlaması yapılması gerekmez.
CSS Kaydırarak Tutturma
Kaydırarak tutturma, kaydırma işlemi tamamlandıktan sonra kaydırma kapsayıcısının kaydırma ofsetini tercih edilen bir tutturma konumuna ayarlama işlemidir.
Bir kaydırma kapsayıcısı, scroll-snap-type özelliğini kullanarak kaydırarak tutturmayı etkinleştirebilir. Bu, tarayıcıya bu kaydırma kapsayıcısını alt öğeleri tarafından üretilen yakalama konumlarına yakalamayı düşünmesi gerektiğini söyler. scroll-snap-type, kaydırmanın gerçekleştiği ekseni (x, y veya both) ve yapışma katılık düzeyini (mandatory, proximity) belirler. Bunlara daha sonra değineceğiz.
Kaydırma konumu, bir öğe üzerinde istenen hizalama beyan edilerek oluşturulabilir.
Bu konum, en yakın üst öğe kaydırma kapsayıcısı ile öğenin, belirtilen eksen için belirtildiği şekilde hizalandığı kaydırma ofsetidir. Her eksende şu hizalamalar mümkündür: start, end, center.
start hizalama, kaydırma kapsayıcısı kaydırma bağlantı noktası başlangıç kenarının, öğe bağlantı alanı başlangıç kenarıyla aynı hizada olması gerektiği anlamına gelir. Benzer şekilde, end ve center hizalamaları, kaydırma kapsayıcısı kaydırma noktası bitiş kenarının veya merkezinin, öğe kaydırma alanı bitiş kenarı ya da merkeziyle aynı hizada olması gerektiği anlamına gelir.
Aşağıdaki örneklerde bu kavramların nasıl kullanılacağı gösterilmektedir.
Örnek: Yatay galeri
Kaydırarak tutturma özelliğinin yaygın kullanım alanlarından biri resim rulosudur. Örneğin, kaydırdığınızda her görsele yapışan yatay bir görsel rulosu oluşturmak için kaydırma kapsayıcısının yatay eksende zorunlu bir scroll-snap-type değerine sahip olmasını belirtebiliriz. Yapışmanın görseli rulonun ortasına yerleştirmesini sağlamak için her görseli scroll-snap-align: center olarak ayarlayın.
#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>
Yapışma konumları bir öğeyle ilişkilendirildiğinden yapışma algoritması, öğe ve kaydırma kapsayıcısı boyutuna göre ne zaman ve nasıl yapışacağı konusunda akıllı olabilir. Örneğin, bir resmin rulodan daha büyük olduğu durumu ele alalım. Basit bir yakalama algoritması, kullanıcının resmi tam olarak görmek için kaydırma yapmasını engelleyebilir. Ancak spesifikasyon, uygulamaların bu durumu algılamasını ve kullanıcının yalnızca kenarlara yapışarak bu resim içinde serbestçe kaydırmasına izin vermesini gerektirir.
Örnek: Yolculuk içeren ürün sayfası
Kaydırarak tutturmanın faydalı olabileceği bir diğer yaygın durum da dikey olarak kaydırılacak birden fazla mantıksal bölümü olan sayfalardır (ör. tipik bir ürün sayfası). scroll-snap-type: y proximity;, bu gibi durumlar için daha doğal bir seçimdir. Kullanıcı belirli bir bölümün ortasına kaydırdığında müdahale etmez ancak yeterince yaklaştığında yeni bir bölüme geçer ve dikkat ç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>
Kaydırma dolgusu ve kenar boşluğu
Ürün sayfasının üst kısmında sabit bir başlık var. Tasarımda ayrıca, kaydırma kapsayıcısı tutturulduğunda üst bölümün bir kısmının görünür kalması isteniyordu. Böylece kullanıcılara yukarıdaki içerikle ilgili bir tasarım ipucu verilecekti.
scroll-padding özelliği, kaydırarak tutturma hizalamaları hesaplanırken kullanılan kaydırma kapsayıcısının veya kaydırma bağlantı noktasının etkili görüntülenebilir bölgesini ayarlamak için kullanılabilen yeni bir CSS özelliğidir. Bu özellik, kaydırma kapsayıcısının dolgu kutusuna göre bir içe yerleştirme tanımlar. Örneğimizde, üst kısma 15vh ek içe yerleştirme eklendi. Bu, tarayıcıya kaydırarak tutturma için dikey başlangıç kenarı olarak kaydırma kapsayıcısının üst kenarının 15vh altında daha düşük bir konumu dikkate almasını söyler. Yerleştirme sırasında, yerleştirme hedefi öğesinin başlangıç kenarı bu yeni konumla aynı hizada olur ve üstte boşluk kalır.
scroll-margin özelliği, kaydırma hedefi etkin kutusunu ayarlamak için kullanılan başlangıç miktarını tanımlar. Bu, scroll-padding özelliğinin kaydırma kapsayıcısında nasıl çalıştığına benzer.
Bu iki özelliğin adında "snap" kelimesinin yer almadığını fark etmiş olabilirsiniz. Bu, kasıtlı bir durumdur. Çünkü bu özellikler, yalnızca kaydırarak tutturma işlemi yapmakla kalmaz, aynı zamanda ilgili tüm kaydırma işlemleri için kutuyu değiştirir. Örneğin, Chrome, PageDown ve PageUp gibi sayfa kaydırma işlemleri için sayfa boyutunu hesaplarken ve Element.scrollIntoView() işlemi için kaydırma miktarını hesaplarken bunları dikkate alır.
Diğer kaydırma API'leriyle etkileşim
DOM Scrolling API
Kaydırarak 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 amaçlanan kaydırma konumunu hesaplar ve ardından son yakalanan konumu bulmak için uygun yakalama mantığını uygular. Bu nedenle, kullanıcı komut dosyasının tutturma için manuel hesaplama yapması gerekmez.
Kolay kaydırma
Kolay kaydırma, programatik kaydırma işleminin davranışını kontrol ederken kaydırarak tutturma, işlemin hedefini belirler. Kaydırmanın dikey yönlerini kontrol ettikleri için birlikte kullanılabilir ve birbirlerini tamamlayabilirler.
Kaydırma sonu davranışı
Overscroll behavior API, kaydırmanın birden fazla öğe arasında nasıl zincirlendiğini kontrol eder ve kaydırarak tutturmadan etkilenmez.
Dikkat edilmesi gereken noktalar ve en iyi uygulamalar
Hedef öğeler arasında geniş boşluklar varsa zorunlu yakalama kullanmaktan kaçının. Bu durum, yakalama konumları arasındaki içeriğe erişilememesine neden olabilir.
Çoğu durumda, kaydırarak tutturma, özellik algılamaya gerek kalmadan bir geliştirme olarak eklenebilir.
Gerekirse CSS kaydırarak tutturma desteğini algılamak için @supports veya CSS.supports kullanın.
Kullanımdan kaldırılan spesifikasyonda da bulunan scroll-snap-type özelliğini 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 bittiğini varsaymayın. Kaydırarak tutturma, programatik kaydırma tamamlandıktan sonra kaydırma ofsetini ayarlayabilir. Kaydırma işlemi başka nedenlerle kesintiye uğramış olabileceğinden, kaydırarak tutturma özelliğinden önce bile bunun iyi bir varsayım olmadığını unutmayın. Ancak bu durum özellikle kaydırarak tutturma özelliğinde geçerlidir.
Gelecekte yapılacak çalışmalar
Kaydırma deneyimi, Chrome ekibinin yakın zamanda yaptığı bir anketin odak noktasıydı.
Anket sonuçları, eklenti kitaplıkları ile CSS arasındaki farkı azaltmak için ek çalışma yapılması gereken birkaç alan olduğunu gösterdi.
Gelecekteki çalışmalar scroll-snap konusuna odaklanacak ve şunları içerecek:
- API'nin tarayıcılarda kullanılabilirliği ve uyumluluğu
scroll-startgibi yeni CSS API'leri üzerinde çalışın.snapChanged()gibi yeni JS etkinlikleri üzerinde çalışın.