Chrome 129'dan itibaren JavaScript'teki scrollSnapChange ve scrollSnapChanging etkinliklerini kullanabilirsiniz. Yerleşik anlık görüntü etkinlikleri uygulanarak önceden görülemeyen anlık durum üzerinde işlem yapılabilir, doğru zamanda ve her zaman doğru şekilde işlem yapılabilir. Bu etkinliklerin olmadığı bir rahatlık yaşadığınız anlar değil.
scrollSnapChange öncesinde, hangi öğenin kaydırma bağlantı noktasından geçtiğini bulmak için bir kesişim gözlemleyicisi kullanılıyordu. Ancak nelerin tutturulduğunu belirlemek birkaç koşulla sınırlıydı. Örneğin, tutturma öğelerinin kaydırma bağlantı noktasını mu, yoksa kaydırma bağlantı noktasının büyük kısmını mı doldurduğunu tespit edebilirsiniz. Bunu yapmak için kaydırma alanının kesişen öğelerini gözlemler, ardından kaydırma alanının çoğunluğunu kaplayan öğeye göre bunun tutturma hedefi olduğunu varsayın, ardından scrollend öğesini bekledikten sonra tutturulan öğeye (tutturulan hedef) göre işlem yapın.
Ancak, scrollSnapChanging tarihinden önce, tutturma hedefinin ne zaman veya neye göre (ör. bir kaydırma kaydırma hareketiyle) değiştiğini bilmek imkansızdı.
İçinde numaralandırılmış kutular bulunan yatay bir kaydırma çubuğu, tutturulma hedefleri olarak gösteriliyor. Sol tarafta, SnapTargetInline'ın mavi renkle vurgulandığı ScrollSnapChange etkinliklerinin gerçek zamanlı bir günlüğü bulunmaktadır. Sağda, pixelTargetInline'ı griyle vurgulayan ScrollSnapUnlock etkinliklerinin gerçek zamanlı bir günlüğü bulunmaktadır.
Güzel bir haberimiz var. 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 tutturulan hedefin yerleştirilmesiyle sonuçlandığı takdirde ve aşağıdaki sırada tetiklenir
- Kaydırma dinlendikten sonra.
scrollendtarihinden önce.
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 tembel veya tam zamanında görünmesine neden olur.
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 yatay ise snapTargetBlock özelliği null olur. Özelliğin değeri, öğe düğümü olur.
ScrollSnapChange için benzersiz ayrıntılar
Kullanıcı hareketini bırakana kadar tetiklenmez
Hâlâ ekranda bulunan bir parmak veya dokunmatik yüzeyde yer alan parmaklar, kullanıcının hareketinin kaydırma işleminin bitmediğini belirtir. Kaydırma sona ermemiştir. Bu, kaydırma hedefinin henüz değişmediği, kullanıcı hareketinin tamamlanmasını beklediği anlamına gelir.
Tutturma hedefi değişmediyse tetiklenmez
Etkinlik anlık değişiklik içindir ve tutturma hedefi değişmediyse kaydırma çubuğu bir kullanıcı tarafından etkileşimde bulunulmuş olsa bile etkinlik tetiklenmez. Ancak kullanıcı aslında kaydırma yaptığından, kaydırma tamamlandığında scrollend etkinliği tetiklenmeye devam ediyor.
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. Heyecanlı bir şekilde ve kaydırma sırasında etkinleşir.
scroller.addEventListener('scrollsnapchanging', event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
})
scroller.onscrollsnapchanging = event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
}
Etkinlik, tutturulan öğeyi etkinlik nesnesinde snapTargetBlock ve snapTargetInline olarak gösterir. Kaydırıcı yalnızca dikeyse snapTargetInline özelliği null olur. Özelliğin değeri, öğe düğümü olur.
ScrollSnapSwap'e ilişkin benzersiz ayrıntılar
Kaydırma hareketi sırasında erkenden ve sık sık tetiklenir
Tam kullanıcı kaydırma hareketini bekleyen scrollSnapChange işlevinin aksine bu etkinlik, kullanıcı parmağıyla veya dokunmatik yüzeyle kaydırırken istekle tetiklenir. Parmağını kaldırmadan yavaşça kaydıran bir kullanıcı düşünün. Kullanıcı birden çok olası tutturma hedefi üzerinde kaydırdığı sürece scrollSnapChanging, hareket sırasında birden çok kez etkinleşir. Kullanıcı 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 kaydırma hareketi yaptığı bir kaydırma hareketini de değerlendirin. bu etkinlik, temel alınacak hedefle bir kez tetiklenecek. Bu nedenle, hızlı bir hedeftir ve israf edici değildir; tutturma hedefini en kısa sürede sağlar.
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 önemli bir örneği, snap tetiklenen animasyonu etkinleştirmektir. Tutturma öğesini, anlık öğenin alt öğelerini veya tutturulma hedefi olduğunda ilişkili bilgileri bağlamsal olarak gösterme.
Aşağıdaki kalıplarda hemen üretken olmanıza yardımcı olacak bazı kullanım alanları gösterilmektedir.
Referansı vurgula
Bu örnek, paylaşılan referansı öne çıkarır veya görsel olarak odaklar.
scroller.onscrollsnapchange = event => {
scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
event.snapTargetInline.classList.add('snapped')
}
Tutulan öğenin başlığını göster
Bu örnekte, alınan öğ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.
Değiştirme
https://codepen.io/web-dot-dev/pen/wvLPPBL
Değiştir'i tıklayın
https://codepen.io/web-dot-dev/pen/QWXOObw
Tutulan sunu slaytının alt öğeleri bir kez canlandırılıyor
Bu örnek, yeni bir slaytın ne zaman açıldığını ve üzerinde durulduğunu gösterir, bu da içeriği bir kez canlandırmak için çok iyi 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 demoda hem scrollSnapChanging hem de scrollSnapChange hedefleri gösterilmektedir. Bu demo, tarayıcının yapıştırdığı öğenin her zaman sizin olduğunu düşündüğünüz öğe olmayabileceğini gösterir.
Yatay ve dikey kaydırma çubuğunda karelerden oluşan bir ızgara gösteriliyor. Kesik çizgili kenarlık, slideSnapSwap hedefini temsil eder ve düz kenarlık, slideSnapChange hedefidir. Kırmızı, starTargetInline'ı, mavi iseSnapTargetBlock'u temsil eder.
Bağlı iki kaydırma çubuğu
Bu demoda, biri üst düzey bir bağlantı listesi, diğeri ise gerçek sayfalı içerik olan iki kaydırma tutturma kapsayıcısı içerir. Yeni scrollSnapChanging etkinliği, bunların tutturma durumlarını çift yönlü olarak bağlamayı önemsiz hale getirir. Böylece her zaman senkronize olurlar.
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 dokunma kullanıcısı olarak, istediğiniz değere kaydırabilirsiniz. Klavye kullanıcıları sekme ve ok tuşlarını kullanabilir. Ekran okuyucular için bu yalnızca bir formdur.
ScrollSnapSwap, tutturulan öğeyi durumla istekli bir şekilde senkronize etmek için kullanılır. ScrollSnapChange ise kullanıcı girişinin uygulandığı etkilenen renk kanalı başlığını canlandırmak için kullanılır.
https://codepen.io/web-dot-dev/pen/OJeOOVGŞaşırtıcı animasyonlu merkezler tutturma
Bu demo, scrollsnapchange özelliğini kullanarak kaydırmanın tetiklediği geçişlerle kaydırma tutturma deneyimini kademeli olarak iyileştiriyor.
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 bulunmaktadır. Değerleri doğrudan sayı girişine girin veya boyuta gidin. Değişen etkinlik, 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ı Bramus Van Damme'ın kaydırmaya dayalı mükemmel animasyon tasarımına dayanır (eğitim videosu da). Benzersiz olarak, albüm başlığını gizlemek için scrollSnapChanging, başlığı sunmak için scrollSnapChange kullanılır. Etkinlikler, eski başlığın merakla gizlenmesi ve yeni içeriğin tembel bir şekilde sunulmasına yardımcı oluyor.
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 resimle bağlantı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ırmalı Anlatım
- Wheel of Fortune Kullanıcı Arayüzü/Kullanıcı Deneyimi
- Snap hedefine sabit bir ipucu verilir.
- Fotoğrafını çekmek için dokun
- Göstermek için tuttur
- Fotoğraf çekildiğinde ses çıkar
- Kullanıcı arayüzünü kaydırma
- Kaydırılabilir sekmeler veya bantlar
Diğer çalışmalar
Chrome ekibi bu yeni API'lerle oluşturduğunuz şeyleri öğrenmekten heyecan duyuyor ve bunun kaydırılabilir deneyimlerinizi kolaylaştırmaya yardımcı olmasını umuyor.