Zaman aşımı işlevlerinizi silin ve hataları ortadan kaldırın. İşte gerçekten ihtiyacınız olan etkinlik: Scrollend.
scrollend
etkinliğinden önce, kaydırma işleminin tamamlandığını algılamanın güvenilir bir yolu yoktu. Bu durum, etkinliklerin geç tetiklenmesine veya kullanıcının parmağı ekrandayken tetiklenmesine neden oluyordu. Kaydırma işleminin ne zaman sona erdiğini bilme konusundaki bu güvenilir olmama durumu, hatalar ve kullanıcı için kötü bir deneyime yol açıyordu.
document.onscroll = event => { clearTimeout(window.scrollEndTimer) window.scrollEndTimer = setTimeout(callback, 100) }
Bu setTimeout()
stratejisinin yapabileceği en iyi şey, 100ms
için kaydırma işleminin durdurulup durdurulmadığını öğrenmektir. Bu, bir kaydırma işleminin değil, bir kaydırma işleminin duraklatıldığını gösterir.
sona erdi.
scrollend
tarayıcı tüm bu zor değerlendirmeyi sizin için yapar.
document.onscrollend = event => {…}
Bu iyi bir gelişme. Yayınlanmadan önce mükemmel bir zamanlamayla ve anlamlı koşullarla doludur.
Deneyin.
Etkinlik ayrıntıları
scrollend
etkinliği şu durumlarda tetiklenir:
- Tarayıcı artık kaydırma işlemini animasyonlu olarak gerçekleştirmiyor veya kaydırma işlemini çevirmiyor.
- Kullanıcının dokunuşu serbest bırakıldı.
- Kullanıcının işaretçisi kaydırma düğmesini bıraktı.
- Kullanıcının tuşa basma işlemi iptal edildi.
- Parçaya ilerleme işlemi tamamlandı.
- Kaydırma sabitleme işlemi tamamlandı.
- scrollTo()
tamamlandı.
- Kullanıcı, görsel görüntü alanını kaydırmıştır.
scrollend
etkinliği aşağıdaki durumlarda tetiklenmez:
- Kullanıcının hareketi, kaydırma konumunda herhangi bir değişikliğe neden olmadıysa (çeviri gerçekleşmediyse).
- scrollTo()
, herhangi bir çeviriyle sonuçlanmadı.
Bu etkinliğin web platformuna gelmesinin çok uzun sürmesinin bir nedeni, teknik özellik ayrıntıları gerektiren birçok küçük ayrıntıydı. En karmaşık alanlardan biri, görsel görüntü alanı ile doküman arasındaki scrollend
ayrıntılarını açıklamaktı. Yakınlaştırdığınız bir web sayfasını düşünün. Kaydırabilirsiniz
bu yakınlaştırılmış durumda gezinirken ve sayfayı kaydırarak her zaman
uygulayacaksınız. Kullanıcı tarafından yönlendirilen bu görsel görüntü alanının bile
etkileşimi tamamlandığında scrollend
etkinliğini yayınlar.
Etkinliği kullanma
Diğer kaydırma etkinliklerinde olduğu gibi dinleyicileri birkaç şekilde kaydedebilirsiniz.
addEventListener("scrollend", (event) => {
// scroll ended
});
aScrollingElement.addEventListener("scrollend", (event) => {
// scroll ended
});
Alternatif olarak event özelliğini kullanın:
document.onscrollend = (event) => {
// scroll ended
};
aScrollingElement.onscrollend = (event) => {
// scroll ended
};
Çoklu dolgular ve progresif geliştirme
Bu yeni etkinliği hemen kullanmak istiyorsanız size en iyi tavsiyelerimizi sunuyoruz. Şunları yapabilirsiniz: mevcut kaydırma sonu stratejinizi (varsa) kullanmaya devam edin. başlangıcında desteği şununla kontrol edin:
'onscrollend' in window
// true, if available
Bu, tarayıcının etkinliği sunup sunmadığına bağlı olarak doğru veya yanlış değerini raporlar. Bu kontrol sayesinde kodu şu şekilde dallandırabilirsiniz:
if ('onscrollend' in window) {
document.onscrollend = callback
}
else {
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
}
Bu, scrollend
etkinliğiniz kullanıma sunulduğunda aşamalı olarak geliştirmeye başlamak için iyi bir başlangıçtır. Ayrıca şunu da deneyebilirsiniz:
polyfill
(NPM) Ben en iyisini yaptım
tarayıcı şunları yapabilir:
import {scrollend} from "scrollyfills"
// then use scrollend as if it's existed this whole time
document.onscrollend = callback
polyfill, varsa tarayıcı yerleşik scrollend
etkinliğini kullanmak için kademeli olarak geliştirilir. Bu özellik mevcut değilse komut dosyası, işaretçi etkinliklerini izler ve
Sona eren etkinliğin en iyi tahminini elde etmek için ekranı kaydırın.
Kullanım alanları
Kaydırma işlemi sırasında işlem yükü açısından fazla işlem yapmaktan
bahsedeceğim. Bu uygulama, kaydırmanın mümkün olduğunca fazla
bellek kullanımına ve
mümkün olan en iyi şekilde işlemeye çalışın. Kaydırma artık gerçekleşmediği için scrollend
etkinliği kullanmak, kullanıcıları uyarmak ve zor işi yapmak için mükemmel bir zaman sağlar.
scrollend
etkinliği, çeşitli işlemleri tetiklemek için kullanılabilir. Yaygın kullanım alanı
ilişkili kullanıcı arayüzü öğelerini, kaydırma işleminin
durduruldu. Örnek:
- Nokta göstergeli bir bant kaydırma konumu senkronize ediliyor.
- Bir galeri öğesini meta verileriyle senkronize etme.
- Kullanıcı yeni bir sekmeye kaydırdıktan sonra veri getirme.
Kullanıcının bir e-postayı kaydırarak sildiği bir senaryo düşünün. İşlem tamamlandıktan sonra Ardından, kullanıcının sayfayı kaydırdığı yere göre işlemi gerçekleştirebilirsiniz.
Bu etkinliği, programatik veya kullanıcı kaydırma işleminden sonra senkronizasyon yapmak ya da günlük kaydı analizi gibi işlemler için de kullanabilirsiniz.
Oklar, noktalar ve odak gibi birden fazla öğenin kaydırma konumuna göre güncellenmesi gereken iyi bir örnek aşağıda verilmiştir. Bu bant kaydırma alanını YouTube'da nasıl oluşturduğumu izleyin. Ayrıca canlı demoyu deneyebilirsiniz.
Bu konudaki mühendislik çalışmaları için Mehdi Kazemi'ye, API ve uygulama rehberliği için de Robert Flack'e teşekkür ediyoruz.