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 sayfa düzeni değişikliklerinden sonra kaydırma sabitleme özelliğini 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. Şu anda, bir sabitlemenin uygulanmasını zorlamak için etkinlik dinleyicilerine aşağıdaki kodu ekleyerek bu davranışı simüle edebilirsiniz:
javascript
scroller.scrollBy(0,0);
Bununla birlikte, kaydırma çubuğunun aynı öğeye geri dönmesi garanti edilmez.
Arka plan
CSS Kaydırma Kilidi
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ırma sırasında ortaya çıkabilecek hataları önlemek için kaydırılabilir içeriğin kapsayıcısıyla düzgün bir şekilde hizalanmasını sağlar. Başka bir deyişle, kaydırarak tutturma:
- Kaydırma sırasında garip kaydırma konumlarını önler.
- İçerikte sayfa çevirme efekti oluşturur.
Sayfalara ayrılmış makaleler ve resim bantları, kaydırma anlık görüntülerinin yaygın kullanım alanlarından ikisidir.
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 daha önce sabitlenen öğeyi bulmak için bir pencereyi yeniden boyutlandırdığında kaydırma konumlarını yeniden ayarlamaları gerekir. Sayfa düzeninin değişmesine 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'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ırma çubuğunun öncekiyle aynı içeriğe geri dönmesini beklediğinde bu geçici çözüm etkisiz olabilir. 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
Bahsedilen eksiklikler Chrome 81'de artık mevcut değildir: Kaydırma çubukları, düzen değiştirildikten sonra bile sabit kalır. Bu öğeler, düzenlerini değiştirdikten sonra kaydırma konumlarını yeniden değerlendirir ve gerekirse en yakın sabitleme konumuna yeniden sabitlenir. 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üntüde kalır.
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
Yeniden yakalama kaydırma efektlerinin tümü şu anda anında gerçekleşiyor. Gelecekte sürüklemeye benzer kaydırma efektleriyle yeniden yakalama özelliğini destekleyebiliriz. Ayrıntılar için özellik sorununa bakın.
Geri bildirim
Geri bildirimleriniz, düzen değişikliklerinden sonra yeniden yakalama özelliğini iyileştirmemize yardımcı olur. Bu nedenle, özelliği deneyin ve Chromium mühendislerine fikrinizi bildirin.