Chrome 81'den itibaren zorunlu olarak etkinlik işleyiciler eklemeniz gerekmez yeniden tutturma.
CSS Kaydırma Görüntüsü web geliştiricilerinin iyi kontrollü kaydırma deneyimleri sunmak için kaydırma tutturma konumları. Mevcut uygulamanın bir eksikliği düzen değiştiğinde (ör. görüntü alanının veya cihaz döndürüldüğünden emin olun. Bu sorun Chrome 81 sürümünde düzeltilmiştir.
Birlikte çalışabilirlik
Birçok tarayıcı, CSS Scroll Snap için temel desteği içerir. Daha fazla bilgi için CSS'yi kullanabilir miyim? Daha fazla bilgi için "Snap?" kısmına gidin.
Chrome şu anda düzenden sonra kaydırma tutturmayı uygulayan tek tarayıcıdır
anlamına gelir. Firefox'ta bir
bilet açık
Safari'de de açık bir
bilet:
kaydırmanın içeriği değişir. Şimdilik bu davranışı simüle etmek için
etkinlik işleyicilere bir tutturmayı yürütülmeye zorlaması için aşağıdaki kodu uygulayın:
javascript
scroller.scrollBy(0,0);.
Ancak bu, kaydırıcının aynı yere sabitleneceğini garanti etmez.
öğesine dokunun.
Arka plan
CSS Kaydırma Görüntüsü
CSS Kaydırma Tutturma özelliği, web geliştiricilerinin kaydırma yerine kaydırma konumlarını tanımlayarak kaydırma deneyimleri oluşturun. Bu konumlar Kaydırılabilir içeriğin, kapsayıcıyla doğru şekilde hizalandığından emin olmak için düzgün olmayan kaydırma sorunlarından kurtulmanıza yardımcı olur. Başka bir deyişle, kaydırma tutturma:
- Kaydırma sırasında tuhaf kaydırma konumlarını önler.
- İçerikte sayfalama etkisi oluşturur.
Sayfalara ayrılmış makaleler ve resim ruloları, kaydırma için en yaygın iki kullanım alanıdır enstantane fotoğraflar.
Eksiklikler
Kaydırma tutturma, kullanıcıların içerikte kolayca gezinmesine olanak tanır ancak içerik ve düzendeki değişikliklere uyum sağlayamaması, bu potansiyelinin bir kısmını avantajları Örnekte gösterildiği gibi bir pencereyi yeniden boyutlandıran kullanıcıların, kaydırma konumlarını daha önce tutturulan öğeyi bulun. Düzene neden olan bazı yaygın senaryolar şunlardır:
- Pencereyi yeniden boyutlandırma
- Cihazı döndürme
- Geliştirici Araçları'nı açma
İlk iki senaryo, CSS Scroll Snap'in kullanıcılar için daha az çekici olmasını sağlar ve üçüncüsü, hata ayıklama sırasında geliştiriciler için bir kabus. Geliştiriciler ayrıca şunları da yapmalıdır: göz önünde bulundurmanız gereken dinamik bir deneyim oluşturmaya çalışırken içerik ekleme, kaldırma veya taşıma gibi işlemleri destekler.
Bunun yaygın bir yolu, üzerinden programatik kaydırma işlemi yürüten işleyiciler eklemektir. Belirtilen bu düzenden herhangi biri her seferinde tutturmayı çalışmaya zorlayacak JavaScript tavsiye edilir. Bu geçici çözüm, kullanıcı öncekiyle aynı içeriğe geri dönmek için kaydırıcıyı kullanın. Diğer işlemler JavaScript'in, bu CSS özelliğinin amacını ortadan kaldırdığı anlaşılıyor.
Chrome 81'de düzen değişikliklerinden sonra yeniden tutturma için yerleşik destek
Bahsedilen eksiklikler artık Chrome 81'de mevcut değil: Kaydırıcılar kullanmaya devam edecek bileğinizi korumanız gerekir. Kaydırma konumlarını şu tarihten sonra yeniden değerlendirecekler: yerlerini değiştirmeli ve gerekirse en yakın tutturma konumuna yeniden tutturmalıdır. Eğer kaydırma çubuğu önceden düzen değişikliğinden sonra, kaydırma çubuğu ona geri oturmaya çalışır. Organizasyondaki düzen aşağıdaki öğelerde değiştiğinde ne olur example) arayın.
NOPE yazan slayta gidip cihaz yönünü değiştirdikten sonra
yataydan yatay konuma getirildiğinde boş bir ekran gösterilir.
kaydırma tutturma konumu kayboldu.
NOPE adlı cihazın görünümde kalmaya devam ettiğini söylüyor.
Bkz. Düzen değişikliklerinden sonra yeniden tutturma teknik özellikler bolca fırsat sunuyor.
Örnek: Yapışkan kaydırma çubukları
"Düzen değişikliklerinden sonra tuttur" özelliği sayesinde, geliştiriciler birkaç satırları ekleyin:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
Daha fazla bilgi edinmek ister misiniz? Aşağıdaki demo sohbetine göz atın Görseller için kullanıcı arayüzünü.
Gelecekteki işler
Tüm yeniden yapışma kaydırma efektleri şu anda anında; potansiyel bir takip e-postası hazır kaydırma ile yeniden yapışmayı destekleyecek efektleri. Spesifikasyon sorununu inceleyin. inceleyebilirsiniz.
Geri bildirim
Geri bildirimleriniz, düzen değişikliklerinden sonra yeniden yapışmayı iyileştirmek açısından çok değerli. Bu nedenle devam edin deneyin ve Chromium mühendislerinin bilmesini düşünmemiz gerekir.