CSS Scroll Snap Noktalarına Giriş

CSS Scroll Snap Modülü bize biraz kontrol sağlayan bir web standardıdır. web sayfasında kaydırma böylece kullanıcıların bir sayfanın belirli bölümlerine değil, bir sayfanın belirli bölümlerine kaydırmasını sağlayabiliriz..

Kaydırma bir web sitesinde en çok gerçekleştirilen eylemlerden biridir. Tarayıcılar, yıllar içinde kaydırma performanslarını geliştirdi Kullanıcıların çevik parmak gücünü eşleştirmek için. Ve geliştiriciler var yaratıcı kaydırma daha iyi veya kullanıma hazır bir kullanıcı deneyimi sağlamak için.

Ancak, bu arasındaki korelasyon söz konusu olduğunda kodlama ve kaydırma, yalnızca JavaScript, ikincisi üzerinde herhangi bir denetime sahip görünüyordu. Bu çok uzun zaman oldu, ama kaydırma noktalarının tanıtılması, CSS yetişmeye başladı.

Kaydırma bağlantı noktaları olmadan kaydırma

Genelde, özellikle telefonlarda çok yavaş kaydırma yapmayız. Ne kadar hızlı kaydırırsanız, o kadar az kontrole sahip olabilirsiniz Ekranın neresinde biteceksin? kaydırmayı bıraktığınızda.

Bir web sitesinde bir ürün resmi dizisinde, bir fotoğraf galerisinde veya çevrimiçi slaytlarda gezindiğinizi hayal edin. Bu tür uygulamalarda tercih edeceğiniz şey ürün, fotoğraf veya slaytın tamamını görün Her kaydırdığınızda. Sadece bir Bölüm ürün resmi, fotoğrafı veya slayt.

Örneğin, aşağıdaki demoda, kullanıcının ne zaman kaydırma yapmayı bıraktığını görebilirsiniz, yalnızca Resmin yaklaşık yarısı görünür Ekranın altında Ancak, çoğu kullanıcı son resmi tam olarak görmeyi tercih eder.

Kaydırma bağlantı noktaları ile kaydırma

Buraya getirdiğimiz yer CSS kaydırma bağlantı noktaları. Adı kendini açıklayıcı; bize izin veren bir CSS standardıdır. öğeleri yerine oturtun kaydırma yaparken.

Var beş CSS özelliği bu standardı oluşturan:

1. kaydırmak-ek bileşeni tipi
2. -Ek kaydırma noktalarını-X
3. -Ek kaydırma noktalarını-y
4. kaydırma-ek koordinat
5. kaydırmak-ek bileşeni hedef

Tarayıcı desteği

Özellikleri gerek -webkit ve -MS önek ilgili tarayıcılar için. Bu makalede yazıldığı gibi, Chrome ve Opera’da CSS kaydırma ek bileşeni desteklenmiyor.

Son dört özelliğin yakın gelecekte kullanıcı aracıları tarafından düşebileceğini unutmayın. Yerine, yeni özellikler, yani kaydırmak-ek bileşeni-align, kaydırmak-ek bileşeni marjı, ve kaydırmak-ek bileşeni dolgu, oluşturulabilir, bu şartnamede tanımlandığı gibi.

Ancak, onlar olacak benzer bir amacı olmak eski özellikler olarak. Şu anda, eski özellikler kümesi gayet iyi çalışacak.

Özellikleri

Gerek ekle kaydırmak-ek bileşeni tipi kaydırma kabının özelliği (Kaydırılırken çocukları taşan konteyner elemanı). Belirtir snap eyleminin sertliği. Üç değer alabilir:

1. zorunlu - kaydırma bittiğinde, kaydırma ilgili bir anlık noktaya asmak
2. yakınlık - daha az katı zorunlu; olacak kararına bağlı UA Elemanın belirli bir çekme noktasına yapışıp bağlanmayacağı
3. Yok - yapışma yok

-Ek kaydırma noktalarını-X ve -Ek kaydırma noktalarını-y özellikleri kaydırma kabına ait, çok. Anlık noktaların olacağı yer olan x ve y eksenindeki noktalara işaret ederler. Onların değeri tarafından verilen tekrar et() fonksiyon. Örneğin, x ekseni boyunca ek noktalarını aralık aralığında eklemek istiyorsanız, 100px kullanman gerek scroll-snap-points-x: tekrarla (100px) kural.

kaydırmak-ek bileşeni hedef Kaydırma kabına da özellik eklenir. O Kaptaki bir koordinatı tanımlar. anlık bir hedefin bulunduğu yer. Muhafazadaki çocukların kaydırıldığında yerlerine oturacakları bu hedef yerindeydi.

Kullanabilirsiniz kaydırma-ek koordinat ile birlikte mülkiyet kaydırmak-ek bileşeni hedef. Bunu kabın alt öğelerine eklemeniz gerekir. O Alt elemanların koordinatlarını tanımlar, kullanıcı ekranı kaydırdığında kaydırma kaplarının hedef koordinatlarıyla aynı hizada olacak.

Tüm özellikleri bir seferde kullanmak zorunda olmadığınızı unutmayın.. Sadece kaydırmak-ek bileşeni tipi Zorunlu. Bununla birlikte, tek tek ek noktaları tanımlayabilir veya hedef koordinat kombinasyonunu kullanabilirsiniz..

Kod örneği

İşte bir örnek kod pasajı tipik kaydırma kabı, ile dikey yönde kaydırma ve içindeki bazı resimler. Bu yazının başında bulabileceğiniz demosunu çıktılar..

 div genişlik: 300 piksel; yükseklik: 300px; taşma: auto;… div> img genişlik: 250px; yükseklik: 150 piksel;… 

Şimdi biz bazı bağlantı noktaları ekle kaydırma kabına:

 div genişlik: 300 piksel; taşma: otomatik; kaydırma-snap-noktaları-y: tekrar (150px); scroll-snap-type: zorunlu;  

Aşağıda çıktının nasıl göründüğünü görebilirsiniz CSS bağlantı noktaları eklendi. Alttaki resim yalnızca kısmen görünür durumdayken, kaydırma durduğunda fark tam görüntü belirir scrollport, üstündeki yapışma noktasına oturduktan sonra.