Chrome 81'den itibaren, yeniden yakalamayı zorlamak için artık etkinlik dinleyicileri eklemeniz gerekmez.
CSS Kaydırma Sabitlemesi, web geliştiricilerine kaydırma sabitleme konumlarını bildirerek iyi kontrol edilen kaydırma deneyimleri oluşturma olanağı sunar. Mevcut uygulamanın bir eksikliği, kaydırma sabitlemenin, görüntü alanı yeniden boyutlandırıldığında veya cihaz döndürüldüğünde gibi düzen değiştiğinde düzgün çalışmamasıdır. Bu eksiklik Chrome 81'de düzeltilmiştir.
Birlikte çalışabilirlik
Çoğu tarayıcıda CSS Scroll Snap için temel destek bulunur. Daha fazla bilgi için CSS Scroll Snap'i kullanabilir miyim? başlıklı makaleyi inceleyin.
Chrome şu anda düzen değişikliklerinden sonra kaydırma tutturmayı uygulayan tek tarayıcıdır. Firefox'ta bu özelliğin uygulanmasıyla ilgili bir destek kaydı, Safari'de ise kaydırma çubuğunun içeriği değiştikten sonra yeniden fotoğraf çekmeyle ilgili bir destek kaydı açıktır. Şimdilik, bir yapışmayı yürütülmeye zorlamak için etkinlik işleyicilere aşağıdaki kodu ekleyerek bu davranışı simüle edebilirsiniz:
javascript
scroller.scrollBy(0,0);
Ancak bu işlem, kaydırma çubuğunun tekrar aynı öğeye sabitleneceğini garanti etmez.
Arka plan
CSS Kaydırma Görüntüsü
CSS Scroll Snap özelliği, web geliştiricilerine kaydırma sabitleme konumlarını bildirerek iyi kontrol edilen kaydırma deneyimleri oluşturma olanağı sunar. Bu konumlar, kaydırmayla ilgili hataları önlemek için kaydırılabilir içeriğin kapsayıcısıyla düzgün şekilde hizalanmasını sağlar. Başka bir deyişle, kaydırarak tutturma:
- Kaydırma sırasında tuhaf kaydırma konumlarını önler.
- İçerikte sayfa çevirme efekti oluşturur.
Sayfalara ayrılmış makaleler ve resim ruloları, kaydırma tutturmaları için yaygın olarak kullanılan iki kullanım alanıdır.
Eksiklikler
Kaydırmayla sabitleme özelliği, kullanıcıların içerikte kolayca gezinmesine olanak tanır ancak içerik ve düzendeki değişikliklere uyum sağlayamamasının yol açtığı bazı dezavantajlar vardır. Yukarıdaki örnekte gösterildiği gibi, kullanıcıların önceden tutturulmuş öğeyi bulmak için bir pencereyi yeniden boyutlandırdığında kaydırma konumlarını yeniden ayarlaması gerekir. Düzen değişikliğine 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 ilgi çekici olmasını sağlar. Üçüncü senaryo ise geliştiriciler için hata ayıklama sırasında bir kabustur. Geliştiricilerin, içerik ekleme, kaldırma veya taşıma gibi işlemleri destekleyen dinamik bir deneyim oluşturmaya çalışırken bu eksiklikleri de göz önünde bulundurması gerekir.
Bu sorunun yaygın bir çözümü, söz konusu düzen değişikliklerinden herhangi biri gerçekleştiğinde sabitlemeyi zorlamak için JavaScript aracılığıyla programatik kaydırma yapan dinleyiciler eklemektir. Kullanıcı, kaydırıcının öncekiyle aynı içeriğe tekrar sabitlenmesini beklediğinde bu geçici çözüm işe yaramayabilir. JavaScript ile daha fazla işlem yapmak, bu CSS özelliğinin amacını neredeyse ortadan kaldırıyor.
Chrome 81'de, düzen değişikliklerinden sonra yeniden yakalama için yerleşik destek
Bahsi geçen eksiklikler artık Chrome 81'de mevcut değil: Sayfa düzeni değiştirilse bile kaydırıcılar kilitlenmiş olarak kalır. Kaydırma konumlarını, düzenlerini değiştirdikten sonra yeniden değerlendirirler ve gerekirse en yakın tutturma konumuna yeniden tuttururlar. Kaydırma çubuğu daha önce, düzen değişikliğinden sonra hâlâ mevcut olan bir öğeye sabitlenmişse bu öğeye geri sabitlenmeye çalışır. Aşağıdaki örnekte, düzen değiştiğinde ne olduğuna dikkat edin.
NOPE yazan slayta gidip cihaz yönünü dikeyden yatay konuma değiştirdikten sonra, kaydırma sabitleme konumunun kaybolduğunu belirten boş bir ekran gösterilir.
NOPE yazan slayt görünmeye devam ediyor.
Daha fazla bilgi için Düzen değişikliklerinden sonra yeniden yakalama spesifikasyonu başlıklı makaleyi inceleyin.
Örnek: Yapışkan kaydırma çubukları
"Düzenleme değiştikten sonra sabitle" özelliğiyle geliştiriciler birkaç satır CSS ile 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örsel için aşağıdaki demo sohbet kullanıcı arayüzüne bakın.
Gelecekte yapılacak çalışmalar
Tüm yeniden yapışma kaydırma efektleri şu anda anında uygulanmaktadır. Yumuşak kaydırma efektleriyle yeniden tutturmayı desteklemek olası bir takiptir. Ayrıntılar için özellik sorununa bakın.
Geri bildirim
Geri bildirimleriniz, düzen değişikliğinden sonra yeniden yapışmayı iyileştirmek için çok önemlidir. Bu yüzden, devam edip deneyin ve Chromium mühendislerinin düşüncelerinizi öğrenmesini sağlayın.