CSS Scroll Snap, web geliştiricilerinin kaydırma yakalama konumlarını bildirerek iyi kontrol edilen kaydırma deneyimleri oluşturmasına olanak tanır. Mevcut uygulamanın bir eksikliği, kaydırma yakalamanın, görüntü alanı yeniden boyutlandırıldığında veya cihaz döndürüldüğünde olduğu gibi düzen değiştiğinde iyi çalışmamasıdır. Bu eksiklik Chrome 81’de giderilmiştir.
birlikte çalışabilirlik #
Birçok tarayıcı, CSS Scroll Snap için temel desteğe sahiptir. Görmek CSS Scroll Snap kullanabilir miyim? daha fazla bilgi için.
Chrome, şu anda düzen değişikliklerinden sonra kaydırma yakalamayı uygulayan tek tarayıcıdır. Firefox’ta bir bilet bunu uygulamak için açık ve Safari’nin de açık bilet kaydırma çubuğunun içeriği değiştikten sonra yeniden yakalama için. Şimdilik, bir yakalamayı yürütmeye zorlamak için olay dinleyicilerine aşağıdaki kodu ekleyerek bu davranışı simüle edebilirsiniz:
scroller.scrollBy(0,0);
Ancak bu, kaydırma çubuğunun aynı öğeye geri dönmesini garanti etmez.
Arka plan #
CSS Kaydırma Yapışması #
CSS Scroll Snap özelliği, web geliştiricilerinin kaydırma yakalama konumlarını bildirerek iyi kontrol edilen kaydırma deneyimleri oluşturmasına olanak tanır. Bu konumlar, kaydırılabilir içeriğin, belirsiz kaydırma sorunlarının üstesinden gelmek için kapsayıcısıyla düzgün bir şekilde hizalanmasını sağlar. Başka bir deyişle, kaydırma yakalama:
- Kaydırma sırasında garip kaydırma konumlarını önler.
- İçerikte sayfalama etkisi yaratır.
Sayfalandırılmış makaleler ve resim döngüleri, kayan anlık görüntülerin iki yaygın kullanım durumudur.
eksiklikler #
Kaydırma yakalama, kullanıcıların içerikte zahmetsizce gezinmesine olanak tanır, ancak içerik ve düzendeki değişikliklere uyum sağlayamaması, potansiyel faydalarından bazılarını engeller. gösterildiği gibi örnek yukarıda, kullanıcıların daha önce yakalanan öğeyi bulmak için bir pencereyi yeniden boyutlandırırken kaydırma konumlarını yeniden ayarlaması gerekir. Düzen değişikliğine neden olan bazı yaygın senaryolar şunlardır:
- Bir pencereyi yeniden boyutlandırma
- Bir cihazı döndürme
- DevTools’u Açma
İlk iki senaryo, CSS Scroll Snap’i kullanıcılar için daha az çekici hale getirir ve üçüncüsü, hata ayıklama sırasında geliştiriciler için bir kabustur. Geliştiricilerin içerik ekleme, kaldırma veya taşıma gibi eylemleri destekleyen dinamik bir deneyim oluşturmaya çalışırken bu eksiklikleri de göz önünde bulundurması gerekir.
Bunun için yaygın bir düzeltme, söz konusu düzen değişikliklerinden herhangi biri gerçekleştiğinde yakalamayı yürütmeye zorlamak için JavaScript aracılığıyla programlı bir kaydırma yürüten dinleyiciler eklemektir. Bu geçici çözüm, kullanıcı kaydırma çubuğunun öncekiyle aynı içeriğe geri dönmesini beklediğinde etkisiz olabilir. JavaScript ile daha fazla işlem yapılması, bu CSS özelliğinin amacını neredeyse geçersiz kılıyor gibi görünüyor.
Chrome 81’deki düzen değişikliklerinden sonra yeniden yakalama için yerleşik destek #
Bahsedilen eksiklikler artık Chrome 81’de mevcut değil: kaydırma çubukları, düzeni değiştirdikten sonra bile yerinde kalacak. Düzenlerini değiştirdikten sonra kaydırma konumlarını yeniden değerlendirecekler ve gerekirse en yakın yakalama konumuna yeniden yakalayacaklar. Kaydırıcı daha önce düzen değişikliğinden sonra hala var olan bir öğeye yapışmışsa, kaydırıcı ona geri dönmeye çalışacaktır. Aşağıda düzen değiştiğinde ne olduğuna dikkat edin. örnek.
Yakalama konumu kayboldu
Bir cihazı döndürme değil Chrome 80’deki yakalama konumlarını koruyun. Yazan slayda kaydırdıktan sonra NOPE ve cihaz yönü dikeyden yataya değiştirildiğinde, kaydırmalı yakalama konumunun kaybolduğunu gösteren boş bir ekran gösterilir.
Yakalama konumu korunmuş
Bir cihazı döndürme yapmak Chrome 81’deki yakalama konumlarını koruyun. NOPE cihaz yönü birçok kez değişse bile görünümde kalır.
Bkz. Düzen değişikliklerinden sonra tekrar yakalama özelliği daha fazla ayrıntı için.
“Düzen değişikliklerinden sonra yakala” ile geliştiriciler, birkaç satırlık CSS ile yapışkan kaydırma çubukları uygulayabilir:
.container {
scroll-snap-type: y proximity;
}.container::after {
scroll-snap-align: end;
display: block;
}
Daha fazla öğrenmek ister misiniz? Aşağıdakilere bakın demo sohbet kullanıcı arayüzü görseller için.
Gelecek iş #
Tüm yeniden yakalama kaydırma efektleri şu anda anlıktır; potansiyel bir takip, yeniden yakalamayı desteklemektir. pürüzsüz kaydırma efektleri. Bkz. şartname sorunu detaylar için.
Geri bildirim #
Düzen değiştikten sonra yeniden yakalamayı daha iyi hale getirmek için geri bildirimleriniz paha biçilmezdir, bu yüzden devam edin ve deneyin ve Chromium mühendislerinin bilmesini sağlayın ne düşündüğünü.