Google I/O'ya katıldığınız için teşekkürler! İçerikleri isteğe bağlı olarak izleyin.

Bu sayfa, Cloud Translation API ile çevrilmiştir.

Anlık Etkinlikleri Kaydırma

Adam Argyle

Chrome 129'dan itibaren JavaScript'deki scrollSnapChange ve scrollSnapChanging etkinliklerini kullanabilirsiniz. Yerleşik anlık görüntü etkinlikleri uygulandığında, daha önce görünmeyen anlık görüntü durumu, doğru zamanda ve her zaman doğru şekilde işlem yapılabilir hale gelir. Bu, bu etkinlikler olmadan sahip olduğunuz bir kolaylık değildir.

Tarayıcı desteği

Kaynak

Tarayıcı desteği

Kaynak

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.

Sabitleme hedefleri olarak içinde numaralandırılmış kutular bulunan yatay bir kaydırma çubuğu gösterilir. Sol tarafta, scrollSnapChange etkinliklerinin anlık günlüğü yer alır. Bu günlükte, snapTargetInline mavi renkle vurgulanır. Sağ tarafta, snapTargetInline öğesinin gri renkle vurgulandığı scrollSnapChanging etkinliklerinin gerçek zamanlı günlüğü gösterilmektedir.

Deneyin
https://codepen.io/web-dot-dev/pen/jOjaaEP

Bu yeni etkinlikler sayesinde bu bilgilere hızlı ve kolay bir şekilde erişebilirsiniz. Bu sayede kaydırmayla sabitleme etkileşimleri mevcut kapasitelerinin ötesine geçer ve kaydırmayla sabitleme ilişkilerinin ve yeni kullanıcı arayüzü geri bildirimi senaryolarının düzenlenmesi sağlanı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:

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

Bu etkinlik, scrollend etkinliğinden hemen önce, kaydırma tamamlandığında ve yalnızca yeni bir sabitleme hedefi üzerine gelindiğinde 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, etkinliğin nesnesi üzerinde snapTargetBlock ve snapTargetInline olarak yakalanan öğeyi 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

Bu etkinlik, tarayıcı kaydırma hareketinin yeni bir sabitleme hedefiyle sonuçlandığına veya sonuçlanacağına karar verir vermez tetiklenir. Bu işlem, kaydırma sırasında da hevesle 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ırma çubuğu 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.

Kullanıcının kaydırma hareketinin tamamlanmasını bekleyen scrollSnapChange'ün aksine bu etkinlik, kullanıcı parmağıyla veya dokunmatik yüzey kullanarak kaydırırken hemen 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ı her kaydırdığında, tarayıcı serbest bırakıldığında yeni bir sabitleme hedefine ulaşacağını belirlerse hangi öğenin olduğunu size bildirmek için etkinlik tetiklenir.

Yeni bir anlık görüntü hedefine giden yoldaki tüm anlık görüntü hedeflerini tetiklemez.

Ayrıca, kullanıcının aynı anda birden fazla sabitleme hedefini kapsayan bir kaydırma hareketi yaptığı bir fırlatma düşünün. Bu etkinlik, duracağı hedefle birlikte 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ı sağlarken mevcut kalıpların uygulanmasını da ç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.

Bir referansı öne çıkarma

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')
}

https://codepen.io/web-dot-dev/pen/dyBZZPe

Kırpılan öğenin altyazısını göster

Bu örnekte, çekilen öğenin başlığı gösterilmektedir. Bu demoya her iki etkinlik de dahil edilmiştir. Böylece scrollSnapChange ile scrollSnapChanging arasındaki zamanlama ve kullanıcı deneyimi farklılıklarını görebilirsiniz.

Snap Değiştirme
https://codepen.io/web-dot-dev/pen/wvLPPBL

Snap Change
https://codepen.io/web-dot-dev/pen/QWXOObw

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')
})

https://codepen.io/web-dot-dev/pen/rNEYYVj

Kaydırma çubuklarında hem x hem de y ekseninde yapıştırma

Kaydırma sabitleme, yatay ve dikey kaydırmaya izin veren kaydırma çubuklarında çalışır. Bu demoda, ızgara üzerinde gezinirken hem scrollSnapChanging hem de scrollSnapChange hedefleri gösterilmektedir. Bu demo, tarayıcının odaklandığı öğenin her zaman düşündüğünüz öğe olmayabileceğini gösterir.

Yatay ve dikey kaydırma çubuğunda karelerden oluşan bir ızgara gösterilir. Kesikli kenarlık, scrollSnapChanging hedefini, düz kenarlık ise scrollSnapChange hedefini temsil eder. Kırmızı, snapTargetInline'ı, mavi ise snapTargetBlock'u temsil eder.

https://codepen.io/web-dot-dev/pen/qBzVVdp

İ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.

https://codepen.io/web-dot-dev/pen/YzoEEXj

OKLCH renk seçici

Bu demoda, her biri OKLCH'de farklı bir renk kanalını temsil eden 3 kaydırma çubuğu vardır. Sabitlenen öğ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.

scrollSnapChanging, sabitlenen öğeyi durumla hevesle senkronize etmek için kullanılır. scrollSnapChange ise kullanıcı girişinin uygulandığı etkilenen renk kanalı üstbilgisini animasyonlu hale getirmek için kullanılır.

https://codepen.io/web-dot-dev/pen/OJeOOVG

Etkileyici animasyonlu merkezler oluşturma

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

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

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

https://codepen.io/web-dot-dev/pen/MWMOOae

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.

https://codepen.io/web-dot-dev/pen/LYKOOpd

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.

https://codepen.io/web-dot-dev/pen/Bagmmog

Yaratıcılığa ilham verecek daha fazla fikir

Hangi öğenin yakalanmak üzere olduğunu ve hangi öğenin etkin bir şekilde yakalandığını bilmek artık çok kolay. Bu sayede birçok yeni olasılık ortaya çıkıyor. Yaratıcılığa ilham verecek ve ek kullanım alanları sunacak fikirlerin listesini aşağıda bulabilirsiniz:

Anlık değişiklikle tetiklenen oluşturma veya veri getirme olarak bilinen, yavaş yüklemeyi tetikleme.
Daha büyük bir resme bağlı film şeridi küçük resimleri.
Kırpılmış bir video küçük resminin video fragmanını oynatma/duraklatma.
Analytics izleme
Kaydırmayla anlatım
Wheel of Fortune kullanıcı arayüzü/kullanıcı deneyimi
Sabitleme hedefi, sabitlenmiş bir ipucu alır.
Fotoğraf çekmek için dokunun
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.