Anlık Etkinlikleri Kaydırma

Adam Argyle

Chrome 129'dan itibaren JavaScript'deki scrollSnapChange ve scrollSnapChanging etkinliklerini kullanabilirsiniz. Yerleşik snap etkinlikleri uygulandığında, daha önce görünmeyen snap durumu doğru zamanda ve her zaman doğru şekilde işlem yapılabilir hale gelir. Bu etkinliklerin olmadığı bir rahatlık yaşadığınız anlar değil.

scrollSnapChange sürümünden önce, kaydırma bağlantı noktasını hangi öğenin geçtiğini bulmak için bir kesişim gözlemcisi kullanabiliyordunuz ancak hangi öğenin yakalandığını belirlemek birkaç durumla sınırlıydı. Örneğin, sabitleme öğelerinin kaydırma bağlantı noktasını doldurup doldurmadığını veya kaydırma bağlantı noktasının büyük bir kısmını doldurup doldurmadığını algılayabilirsiniz. Bunu yapmak için kaydırma alanının kesiştiği öğeleri gözlemleyin, ardından kaydırma alanının çoğunu hangi öğenin kullandığına bağlı olarak bu öğenin sabitleme hedefi olduğunu varsayın, scrollend değerini bekleyin ve sabitlenen öğeyle (sabitleme hedefi) ilgili işlem yapın.

Ancak scrollSnapChanging öncesinde, sabitleme hedefinin ne zaman değiştiğini veya neyle değiştirildiğini (ör. kaydırma fırlatma) bilmek mümkün değildi.

Bu yeni etkinlikler sayesinde bu bilgilere hızlı ve kolay bir şekilde erişebilirsiniz. Bu özellik, kaydırma tutturma etkileşimlerinin mevcut kapasitesinin ötesine geçmelerini sağlar ve kaydırma tutturma ilişkilerinin ve yeni kullanıcı arayüzü geri bildirim senaryolarının düzenlenmesine olanak tanır.

scrollSnapChange

Bu etkinlik yalnızca bir kaydırma hareketi yeni bir sabitleme hedefine dokunulmasına neden olursa ve aşağıdaki sırada tetiklenir:

1. Kaydırma durduktan sonra.
2. scrollend tarihinden önce doğrulayın.

Bu etkinlik scrollend tarihinden hemen önce, kaydırma tamamlandığında ve yalnızca yeni bir tutturma hedefi üzerine durulmuşsa tetiklenir. Bu, kaydırma hareketi tamamlandığında etkinliğin yavaş veya tam zamanında gerçekleşmiş gibi görünmesini sağlar.

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

Etkinlik, tutturulan öğeyi etkinlik nesnesinde snapTargetBlock ve snapTargetInline olarak gösterir. Kaydırma çubuğu yalnızca yataysa snapTargetBlock özelliği null olur. Özelliğin değeri öğe düğümü olur.

scrollSnapChange için benzersiz ayrıntılar

Kullanıcı hareketi bırakana kadar tetiklenmez

Ekrandaki veya dokunmatik yüzeydeki parmaklar, kullanıcının kaydırma hareketinin tamamlanmadığını gösterir. Bu da kaydırma işleminin sona ermediği anlamına gelir. Diğer bir deyişle, sabitleme hedefi henüz değişmemiştir ve kullanıcı hareketinin tamamlanmasını bekler.

Sabitleme hedefi değişmediyse tetiklenmez.

Bu etkinlik, sabitleme değişikliği içindir ve sabitleme hedefi değişmediyse kaydırma çubuğuyla bir kullanıcı tarafından etkileşim kurulsa bile etkinlik tetiklenmez. Ancak kullanıcı gerçekten kaydırmıştır, bu nedenle kaydırma tamamlandığında scrollend etkinliği yine tetiklenir.

scrollSnapChanging

Tarayıcı, kaydırma hareketinin yeni bir tutturma hedefine sahip olduğuna veya bununla sonuçlanacağına karar verdiği anda bu etkinlik tetiklenir. Bu işlem, istekli bir şekilde ve kaydırma sırasında tetikleniyor.

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

Etkinlik, etkinliğin nesnesi üzerinde snapTargetBlock ve snapTargetInline olarak yakalanan öğeyi gösterir. Kaydırıcı yalnızca dikeyse snapTargetInline özelliği null olur. Özelliğin değeri öğe düğümü olur.

scrollSnapChanging için benzersiz ayrıntılar

Kaydırma hareketi sırasında erken ve sık tetiklenir.

Eksiksiz bir kullanıcı kaydırma hareketini bekleyen scrollSnapChange işlevinin aksine, kullanıcı parmağıyla veya dokunmatik yüzeyle kaydırırken bu etkinlik istekli bir şekilde tetiklenir. Parmağını kaldırmadan yavaşça kaydıran bir kullanıcıyı düşünün. Kullanıcı birden fazla potansiyel sabitleme hedefi üzerinde gezinirken scrollSnapChanging hareket sırasında birden çok kez tetiklenir. Kullanıcı sayfayı her kaydırdığında, tarayıcı, serbest bırakma işleminden sonra yeni bir tutturma hedefine dayanacağını belirlerse etkinlik size hangi öğenin olduğunu bildirmek için etkinleşir.

Yeni tutturma hedefine giden yolda tüm tutturma hedeflerini tetiklemez

Ayrıca, kullanıcının aynı anda birden çok tutturma hedefini kapsayan bir kaydırma atış hareketi yaptığı hızlı harekettir. Bu etkinlik, üzerine konulacak hedefle bir kez tetiklenir. Bu nedenle, size en kısa sürede anlık hedefi sunarak istekli ancak israf etmeyen bir yaklaşım benimser.

Kullanım alanları ve örnekler

Bu etkinlikler birçok yeni kullanım alanına imkan sağlarken mevcut modellerin uygulanmasını çok daha kolay hale getirir. Bunun en iyi örneklerinden biri, anlık tetiklemeli animasyonu etkinleştirmektir. Snap öğesini, snap öğesinin alt öğelerini veya snap hedefi olduğunda ilişkili bilgileri bağlama göre gösterme.

Aşağıdaki kalıplar, hemen üretken olmanıza yardımcı olacak bazı kullanım alanlarını göstermektedir.

Referansı vurgula

Bu örnekte, çekilen referans tanıtılıyor veya görsel olarak odaklanılıyor.

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}

Tutulan öğenin başlığını göster

Bu örnekte, çekilen öğenin başlığı gösterilmektedir. Bu demoda her iki etkinlik de yer aldığından, scrollSnapChange ile scrollSnapChanging arasındaki zamanlama ve kullanıcı deneyimi farklarını görebilirsiniz.

Sabitlenmiş bir sunu slaytının alt öğelerini bir kez hareketlendirin.

Bu örnekte, yeni bir slayta ne zaman gelindiği ve slayt üzerinde ne kadar durulduğu belirlenir. Bu, içeriği bir kez animasyonlu hale getirmek için mükemmel bir zamandır.

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})

Kaydırma çubuğunda hem x hem de y'ye tutturma

Kaydırma tutturma, yatay ve dikey kaydırmaya olanak tanıyan kaydırıcılarda çalışır. Siz ızgarada gezinirken bu demo hem scrollSnapChanging hem de scrollSnapChange hedeflerini gösterir. Bu demo, tarayıcının odaklandığı öğenin her zaman düşündüğünüz öğe olmayabileceğini gösterir.

İki bağlı kaydırma çubuğu

Bu demoda, biri üst düzey bağlantı listesi, diğeri ise gerçek sayfalı içerik olan iki kaydırma yakalama kapsayıcısı vardır. Yeni scrollSnapChanging etkinliği, bu öğelerin anlık durumlarını her zaman senkronize olacak şekilde iki yönlü olarak bağlamayı kolaylaştırır.

OKLCH renk seçici

Bu demoda, her biri OKLCH'de farklı bir renk kanalını temsil eden 3 kaydırma çubuğu vardır. Tutturulan öğe, ilgili radyo grubuyla senkronize edilir ve veriler, girişleri sarmalayan bir formdan alınabilir. Fare veya dokunmatik ekran kullanıcısıysanız istediğiniz değere kaydırabilirsiniz. Klavye kullanıcıları sekme tuşunu ve ok tuşlarını kullanabilir. Ekran okuyucular için bu yalnızca bir formdur.

Şaşırtıcı animasyonlu merkezler tutturma

Bu demo, scrollsnapchange kullanarak anında geçişlerle kaydırma anında sabitleme deneyimini kademeli olarak iyileştirir.

Aşağıdaki JavaScript kodu ile etkinlik desteği olup olmadığını kontrol edin:

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}

Kaydırılabilir cetvel girişi

Bu demoda, sayı girişi için uzunluk seçmenin alternatif bir yolu olarak kaydırılabilir bir cetvel kullanılmaktadır. Değerleri doğrudan sayı girişine girin veya boyuta gidin. Değişiklik etkinliği, kullanıcının hareketi sırasında seçimi temizlemek için kullanılır. Değişiklik etkinliği ise durumu güncellemek ve kullanıcının seçimini pekiştirmek için kullanılır.

Kapak akışı

Bu demo, ünlü macOS kapak akışının Bramus Van Damme tarafından mükemmel bir şekilde yeniden oluşturulmuş sürüklemeli animasyonundan (video eğitimi de mevcut) yararlanır. Albüm başlığını gizlemek için scrollSnapChanging, başlığı göstermek için ise scrollSnapChange kullanılır. Bu etkinlikler, eski başlığın hızlı bir şekilde gizlenmesine ve yeni başlığın yavaşça gösterilmesine yardımcı olur.

Yaratıcılığınızı artıracak daha fazla fikir

Hangi öğenin tutturulacağını ve hangilerinin aktif olarak tutturulacağını bilmek artık çok basit olduğundan, pek çok yeni olasılık var! Yaratıcılığı teşvik etmenize yardımcı olacak fikirlerin ve ek kullanım alanlarının bir listesini aşağıda bulabilirsiniz:

• Oluşturmayı veya veri getirmeyi tetikleme olarak bilinen geç yüklemeyi tetikleme.
• Daha büyük bir resme bağlı film şeridi küçük resimleri.
• Anlık video küçük resmi için video fragmanının oynatma/duraklatma durumunu değiştirmek.
• Analytics izleme
• Kaydırma işlevini söyleme
• Wheel of Fortune kullanıcı arayüzü/kullanıcı deneyimi
• Sabitleme hedefi, sabitlenmiş bir ipucu alır.
• Dokunarak fotoğraf çekme
• Snap'i açarak gösterme
• Sesler, fotoğrafta
• Kaydırma kullanıcı arayüzü
• Kaydırılabilir sekmeler veya bantlar

Daha fazla çalışma

Chrome Ekibi, bu yeni API'lerle neler oluşturduğunuzu öğrenmeyi heyecanla bekliyor. Bu API'lerin, kaydırılabilir deneyimlerinizi kolaylaştırmaya yardımcı olacağını umuyoruz.

Kaynaklar:

• CSS Özellikleri
• Kaydırma Görüntüsü Açıklamaları
• MDN Snap Etkinlikleri
• CodePen Koleksiyonu