Chrome 81'den itibaren, zorla yeniden düzenlemeye etkinlik işleyiciler eklemenize artık gerek yoktur.
CSS Scroll Snap, web geliştiricilerinin kaydırma yapışma konumlarını bildirerek iyi kontrol edilen kaydırma deneyimleri oluşturmalarına olanak tanır. Mevcut uygulamanın bir dezavantajı, görüntü alanının yeniden boyutlandırılması veya cihaz döndürülmesi gibi düzen değişikliklerinde kaydırma yapışmasının iyi çalışmamasıdır. Bu eksiklik Chrome 81'de düzeltilmiştir.
Birlikte çalışabilirlik
Birçok tarayıcı, CSS Scroll Snap için temel desteğe sahiptir. Daha fazla bilgi için CSS Scroll Snap'i kullanabilir miyim? konusuna bakın.
Chrome, şu anda düzen değişikliklerinden sonra kaydırma yapışmasını uygulayan tek tarayıcıdır. Firefox'un bunu uygulamak için açık bir bileti, Safari'nin de bir kaydırma çubuğunun içeriği değiştiğinde tekrar yapışmak için açık bir bilet vardır. Şimdilik bu davranışın simülasyonunu yapmak için, tutturmayı yürütülmeye zorlamak üzere etkinlik işleyicilere aşağıdaki kodu ekleyerek gerçekleştirebilirsiniz:
javascript
scroller.scrollBy(0,0);
Ancak bu, kaydırma çubuğunun aynı öğeye tekrar tutturulacağını garanti etmez.
Arka plan
CSS Kaydırma Kenarlığı
CSS Scroll Snap özelliği, web geliştiricilerinin kaydırma tutturma konumlarını bildirerek iyi kontrol edilen kaydırma deneyimleri oluşturmalarına olanak tanır. Bu konumlar, kaydırılabilir içeriğin, doğru olmayan kaydırma sorunlarının üstesinden gelmesi için kapsayıcısıyla doğru bir şekilde hizalanmasını sağlar. Başka bir deyişle, ekranı kaydırarak tutturma:
- Kaydırma sırasında garip kaydırma konumlarını önler.
- İçerikte sayfalama etkisi oluşturur.
Sayfalandırılmış makaleler ve resim ruloları, kaydırma sabitlemelerine ilişkin iki yaygın kullanım örneğidir.
Eksiklikler
Kaydırma tutturma, kullanıcıların içerikte zahmetsizce gezinmesine olanak tanır, ancak içerik ve düzendeki değişikliklere uyum sağlayamaması, içeriğin bazı potansiyel avantajlarını engeller. Yukarıdaki örnekte gösterildiği gibi, önceden tutturulmuş öğeyi bulmak için bir pencere yeniden boyutlandırıldığında kullanıcıların kaydırma konumlarını yeniden ayarlaması gerekir. Düzen değişikliğine neden olan bazı yaygın senaryolar şunlardır:
- Pencereleri yeniden boyutlandırma
- Cihazı döndürme
- Geliştirici Araçları'nı açma
İlk iki senaryo, CSS Scroll Snap'i kullanıcılar için daha az cazip hale getirir. Üçüncü senaryo ise hata ayıklama sırasında geliştiricilerin kabusudur. Geliştiricilerin içerik ekleme, kaldırma veya taşıma gibi işlemleri destekleyen dinamik bir deneyim oluşturmaya çalışırken de bu eksiklikleri dikkate almaları gerekir.
Bu sorunun yaygın bir çözümü, bahsedilen bu düzen değişikliklerinden herhangi biri gerçekleştiğinde yapışmayı zorunlu kılmak için JavaScript aracılığıyla programatik kaydırma yürüten işleyicilerin eklenmesidir. Bu geçici çözüm, kullanıcı kaydırıcının öncekiyle aynı içeriğe dönmesini beklediğinde etkili olmayabilir. JavaScript ile yapılacak başka işlemler, bu CSS özelliğinin amacını neredeyse geçersiz kılacak gibi görünü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ırma çubukları, düzen değiştirildikten sonra bile ekranda kalmayacak. Düzenlerini değiştirdikten sonra kaydırma konumlarını yeniden değerlendirir ve gerekirse en yakın tutturma konumuna yeniden tutturur. Kaydırma çubuğu daha önce düzen değişikliğinden sonra hâlâ mevcut olan bir öğeye tutturulduysa kaydırma çubuğu bu öğeye tekrar tutturmaya çalışır. Aşağıdaki örnekte, düzen değiştiğinde neler olduğuna dikkat edin.
NOPE yazan slayta ilerleyip cihazın yönünü dikey yerine yatay olarak değiştirdikten sonra boş bir ekran gösterilir. Bu ekran, kaydırma konumunun kaybolduğunu gösterir.
NOPE yazan slayt görünmeye devam eder.
Daha fazla bilgi için Düzen değişikliklerinden sonra yeniden tutturma bölümüne bakın.
Örnek: Yapışkan kaydırma çubukları
"Düzen değişikliklerinden sonra tuttur" seçeneği sayesinde geliştiriciler birkaç CSS satırıyla yapışkan kaydırma çubukları uygulayabilir:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
Daha fazla bilgi edinmek ister misiniz? Görseller için aşağıdaki demo sohbeti kullanıcı arayüzüne bakın.
Gelecekteki çalışmalar
Yeniden tutturma kaydırma efektlerinin tamamı şu anda anında uygulanır. Yumuşak kaydırma efektleriyle yeniden tutturmanın desteklenmesi için olası bir takip kullanılabilir. Ayrıntılar için spesifikasyon sorununa bakın.
Geri bildirim
Geri bildiriminiz, düzen değişikliklerinden sonra yeniden yapışma özelliğini daha iyi hale getirmemiz açısından çok değerlidir. Bu nedenle siz de deneyin ve Chromium mühendislerine düşüncelerinizi iletin.