CSS Scroll Snap ile iyi kontrollü kaydırma

bu CSS Kaydırma Yapışması özelliği, web geliştiricilerinin kaydırma yakalama konumlarını bildirerek iyi kontrol edilen kaydırma deneyimleri oluşturmasına olanak tanır. Sayfalandırılmış makaleler ve resim döngüleri bunun yaygın olarak kullanılan iki örneğidir. CSS Scroll Snap, bu popüler kullanıcı deneyimi modellerini oluşturmak için kullanımı kolay ve tutarlı bir API sağlar.

Arka plan #

Kaydırma yakalama durumu #

Kaydırma, web’deki içerikle etkileşim kurmanın popüler ve doğal bir yoludur. Ekranda aynı anda görünenden daha fazla bilgiye erişim sağlayan platformun yerel aracıdır 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 giderek daha fazla tercih etmesi şaşırtıcı değil.

Kaydırmanın ana dezavantajı, hassasiyet eksikliğidir. Nadiren bir kaydırma bir paragrafa veya cümleye hizalanır. Kaydırma sayfanın veya resmin ortasında bitip onu kısmen görünür bıraktığında, anlamlı sınırlara sahip sayfalandırılmış veya maddeler halinde ayrılmış içerik için bu durum daha da belirgindir. Bu kullanım durumları, iyi kontrol edilen bir kaydırma deneyiminden yararlanır.

Web geliştiricileri, bu eksikliği gidermeye yardımcı olması için kaydırmayı kontrol etmek için uzun süredir JavaScript tabanlı çözümlere güvenmektedir. Ancak JavaScript tabanlı çözümler, kaydırma özelleştirme ilkellerinin veya bileşik kaydırmaya erişimin olmaması nedeniyle tam bir aslına uygun çözüm sağlayamıyor. CSS Scroll Snap, tarayıcılarda tutarlı bir şekilde çalışan hızlı, aslına uygun ve kullanımı kolay bir çözüm sağlar.

CSS Scroll Snap, web yazarlarının her bir kaydırma kabını, kaydırma işlemlerinin biteceği sınırlar ile işaretlemesine olanak tanır. Tarayıcılar daha sonra kaydırma işleminin ayrıntılarına, kaydırma kabının düzenine ve görünürlüğüne ve yakalama konumlarının ayrıntılarına bağlı olarak en uygun son konumu seçer ve ardından sorunsuz bir şekilde ona göre hareket eder. Önceki örneğimize dönersek, kullanıcı karuseli kaydırmayı bitirdiğinde, görünen görüntüsü yerine oturur. JavaScript için kaydırma ayarlaması gerekmez.

Kaydırma yakalama, bir kaydırma kabının kaydırma ofsetini tercih edilen bir konumda olacak şekilde ayarlama eylemidir. ani pozisyon kaydırma işlemi bittiğinde.

Bir kaydırma kapsayıcısı, kullanılarak kaydırma yakalamaya dahil edilebilir. scroll-snap-type mülk. Bu, tarayıcıya, bu kaydırma kapsayıcısını alt öğeleri tarafından üretilen yakalama konumlarına tutturmayı düşünmesi gerektiğini söyler. scroll-snap-type kaydırmanın gerçekleştiği ekseni belirler: x, yveya bothve yakalama katılığı: mandatory, proximity. Bunlar hakkında daha sonra.

Bir eleman üzerinde istenen bir hizalama bildirilerek bir yakalama konumu üretilebilir. Bu konum, en yakın ata kaydırma kabının ve öğenin verilen eksen için belirtildiği şekilde hizalandığı kaydırma ofsetidir. Her eksende aşağıdaki hizalamalar mümkündür: start, end, center.

A start hizalama, kaydırma kapsayıcı anlık bağlantı noktası başlangıç ​​kenarının, öğe yakalama alanı başlangıç ​​kenarı ile aynı hizada olması gerektiği anlamına gelir. Benzer şekilde, end Ve center hizalamalar, kaydırma kabı anlık bağlantı noktası uç kenarının veya merkezinin, öğe yakalama alanı uç kenarı veya merkezi ile aynı hizada olması gerektiği anlamına gelir.

Aşağıdaki örnekler, bu kavramların nasıl kullanılacağını göstermektedir.

Örnek: Yatay bir galeri #

Kaydırma yakalama için yaygın bir kullanım durumu, bir görüntü karuselidir. Örneğin, siz kaydırdıkça her bir görüntüye oturan yatay bir görüntü karuseli oluşturmak için, kaydırma kabını zorunlu olarak belirtebiliriz. scroll-snap-type yatay eksende. her görüntüyü şu şekilde ayarla: scroll-snap-align: center Yakalamanın görüntüyü karuselin içinde ortalamasını sağlamak için.

#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">
&LT/div>

Yakalama konumları bir öğeyle ilişkilendirildiğinden, yakalama algoritması, öğe ve kaydırma kabı boyutu verildiğinde ne zaman ve nasıl yakalayacağı konusunda akıllı olabilir. Örneğin, bir görüntünün döngüden daha büyük olduğu durumu düşünün. Naif bir yakalama algoritması, kullanıcının tam görüntüyü görmek için kaydırma yapmasını engelleyebilir. Ama Şartname bu durumu algılamak ve kullanıcının yalnızca kenarlarından yakalayarak o görüntünün içinde serbestçe gezinmesine izin vermek için uygulamalar gerektirir.

Örnek: gezilen bir ürün sayfası #

Kaydırma yakalamadan yararlanabilecek başka bir yaygın durum, örneğin tipik bir ürün sayfası gibi dikey olarak kaydırmak için birden çok mantıksal bölümü olan sayfalardır. scroll-snap-type: y proximity; bu gibi durumlar için daha doğal bir uyumdur. Bir kullanıcı belirli bir bölümün ortasına kaydırdığında müdahale etmez, ancak yeterince yakın kaydırdığında yeni bir bölüme dikkat çeker ve dikkati çeker.

Bunun nasıl sağlanabileceği aşağıda açıklanmıştır:

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 &LT/header>
section> Section One &LT/section>
section> Section Two &LT/section>
section> Section Three &LT/section>
&LT/article>

Kaydırma dolgusu ve kenar boşluğu #

Ürün sayfasının sabit konumlu bir üst başlığı vardır. Tasarım ayrıca, kullanıcılara yukarıdaki içerik hakkında bir tasarım ipucu sağlamak için kaydırma kabı kapatıldığında üst bölümün bir kısmının görünür kalmasını istedi.

bu scroll-padding özelliği, kaydırma kapsayıcısının etkili görüntülenebilir bölgesini ayarlamak için kullanılabilecek yeni bir css özelliğidir veya kaydırma çıtçıt hizalamalarını hesaplarken kullanılan anlık bağlantı noktasıdır. Özellik, kaydırma kabının dolgu kutusuna karşı bir iç metin tanımlar. Örneğimizde, 15vh üste, tarayıcıya daha düşük bir konumu dikkate alması talimatını veren ek ek eklendi, 15vh kaydırma kapsayıcısının üst kenarının altında, kaydırma yakalama için dikey başlangıç ​​kenarı olarak. Yakalama sırasında, yakalama hedef öğesinin başlangıç ​​kenarı bu yeni konumla aynı hizada olacak ve böylece yukarıda boşluk bırakılacaktır.

bu scroll-margin özelliği, ani hedef etkin kutusunu ayarlamak için kullanılan başlangıç ​​miktarını, nasıl yapıldığına benzer şekilde tanımlar. scroll-padding ek kaydırma kapsayıcısındaki işlevler.

Bu iki özellikte ” kelimesinin bulunmadığını fark etmiş olabilirsiniz.snap” içlerinde. Bu, aslında tüm ilgili kaydırma işlemleri için kutuyu değiştirdikleri ve yalnızca kaydırma yakalama olmadıkları için kasıtlıdır. Örneğin, Chrome, PageDown ve PageUp gibi sayfa kaydırma işlemleri için sayfa boyutunu hesaplarken ve ayrıca ne zaman için kaydırma miktarının hesaplanması Element.scrollIntoView() operasyon.

DOM Kaydırma API’sı #

Kaydırma yakalama gerçekleşir sonrasında komut dosyası tarafından başlatılanlar dahil tüm kaydırma işlemleri. Gibi API’leri kullanırken Element.scrollTo, tarayıcı işlemin amaçlanan kaydırma konumunu hesaplayacak ve ardından son yakalama konumunu bulmak için uygun yakalama mantığını uygulayacaktır. Bu nedenle, yakalama için herhangi bir manuel hesaplama yapmak için kullanıcı komut dosyasına gerek yoktur.

Pürüzsüz kaydırma #

Yumuşak kaydırma, programatik kaydırma işleminin davranışını kontrol ederken kaydırmalı yakalama, hedefini belirler. Kaydırmanın ortogonal yönlerini kontrol ettikleri için birlikte kullanılabilirler ve birbirlerini tamamlarlar.

Aşırı kaydırma davranışı #

Fazla kaydırma davranışı API’sı kaydırmanın birden çok öğe arasında nasıl zincirlendiğini kontrol eder ve kaydırma çıtçıtından etkilenmez.

Uyarılar ve en iyi uygulamalar #

Hedef öğeler geniş aralıklı olduğunda zorunlu yakalamayı kullanmaktan kaçının. Bu, yakalama konumları arasındaki içeriğin erişilemez hale gelmesine neden olabilir.

Birçok durumda kaydırmalı yakalama, özellik algılamaya gerek kalmadan bir geliştirme olarak eklenebilir. Gerekirse, kullanın @supports veya CSS.supports CSS Scroll Snap desteğini algılamak için. Kullanmaktan kaçın scroll-snap-type kullanımdan kaldırılan spesifikasyonda da mevcuttur.

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
}

Gibi programlı olarak kayan API’lerin olduğunu varsaymayın. Element.scrollTo her zaman istenen kaydırma ofsetinde bitirin. Kaydırma yakalama, programlı kaydırma tamamlandıktan sonra kaydırma ofsetini ayarlayabilir. Kaydırma başka nedenlerle kesintiye uğramış olabileceğinden, bunun kaydırma yakalamadan önce bile iyi bir varsayım olmadığını unutmayın, ancak bu özellikle kaydırma yakalamada geçerlidir.

Gelecek iş #

Kaydırma deneyimi, Chrome ekibi tarafından yakın zamanda yapılan bir anketin odak noktasıydı. Anket sonuçları, eklenti kitaplıkları ve CSS arasındaki boşluğu azaltmak için ek çalışma gerektiren birkaç alan belirledi. Gelecek çalışmalar üzerinde durulacak scroll-snapiçermek:

1. Tarayıcılar arasında API kullanılabilirliği ve uyumluluğu.
2. Üzerinde çalışmak yeni CSS API’leri beğenmek scroll-start.
3. Üzerinde çalışmak yeni js etkinlikleri beğenmek snapChanged().