Scrollend, yeni bir JavaScript etkinliği

Zaman aşımı işlevlerinizi silin ve hatalarını giderin. İhtiyacınız olan etkinlik: scrollend.

Adam Argyle

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ğı hâlâ ekrandayken tetiklenmesine neden oluyordu. Kaydırma işleminin ne zaman sona erdiğinin tam olarak bilinememesi, hatalara ve kullanıcı deneyiminin olumsuz etkilenmesine yol açıyordu.

Önce

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Bu setTimeout() stratejisinin yapabileceği en iyi şey, kaydırmanın 100ms için durup durmadığını bilmektir. Bu, kaydırma işleminin sona erdiği bir etkinlikten ziyade kaydırma işleminin duraklatıldığı bir etkinlik gibi görünmesine neden olur.

scrollend etkinliğinden sonra tarayıcı, tüm bu zor değerlendirmeleri sizin için yapar.

Sonra

document.onscrollend = event => {…}

İşte bu harika. Yayınlanmadan önce mükemmel bir şekilde zamanlanmış ve anlamlı koşullarla dolu.

Browser Support

• 114
• 114
• 109
• 26.2

Source

Deneyin.

Etkinlik ayrıntıları

scrollend etkinliği şu durumlarda tetiklenir: - Tarayıcı artık kaydırma animasyonu veya çevirisi yapmıyorsa. - Kullanıcının dokunma işlemi serbest bırakıldı. - Kullanıcının işaretçisi, kaydırma çubuğunu bıraktı. - Kullanıcının tuş basımı serbest bırakıldı. - Parçaya kaydırma işlemi tamamlandı. - Kaydırarak tutturma işlemi tamamlandı. - scrollTo() tamamlandı. - Kullanıcı, görsel görüntü alanını kaydırdı.

scrollend etkinliği şu durumlarda tetiklenmez: - Kullanıcının hareketi, kaydırma konumunda herhangi bir değişikliğe neden olmadığında (çeviri gerçekleşmediğinde). - scrollTo() için çeviri sonucu yok.

Bu etkinliğin web platformuna gelmesinin bu kadar uzun sürmesinin nedeni, spesifikasyon ayrıntılarını gerektiren birçok küçük ayrıntıydı. En karmaşık alanlardan biri, görsel görüntü alanının scrollend ayrıntılarını dokümana göre ifade etmekti. Yakınlaştırdığınız bir web sayfasını düşünün. Bu yakınlaştırılmış durumdayken ekranı kaydırabilirsiniz. Bu işlem, dokümanı kaydırmaz. Bu görsel görüntü alanında kullanıcı tarafından yapılan kaydırma etkileşimi bile tamamlandığında scrollend etkinliğini tetikler.

Etkinliği kullanma

Diğer kaydırma etkinliklerinde olduğu gibi, dinleyicileri birkaç şekilde kaydedebilirsiniz.

addEventListener("scrollend",> (event) = {
  // scroll ended
});

aScrollingElement.addEventListener("scroll>end", (event) = {
  // scroll ended
});

veya etkinlik özelliğini kullanın:

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

Polyfill'ler ve progresif geliştirme

Bu yeni etkinliği hemen kullanmak istiyorsanız aşağıdaki önerilerimizi inceleyebilirsiniz. Mevcut kaydırma sonu stratejinizi (varsa) kullanmaya devam edebilir ve başlangıcında desteği şu şekilde kontrol edebilirsiniz:

'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 döndürür. Bu kontrolle kodu dallandırabilirsiniz:

if ('onscrollend' in window) {
  document.onscrollend = callback
}
else {
  document.onscroll => event = {
    clearTimeout(window.scrollEndTimer)
    window.scrollEndTimer = setTimeout(callback, 100)
  }
}

Bu, scrollend etkinliğinizi kullanılabilir olduğunda progresif olarak geliştirmek için iyi bir başlangıçtır. Ayrıca, tarayıcının yapabileceği en iyi şeyi yapan, benim hazırladığım bir polyfill'i (NPM) deneyebilirsiniz:

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

Polyfill, varsa tarayıcıda yerleşik olarak bulunan scrollend etkinliğini kullanmak için progresif geliştirme yapar. Bu özellik kullanılamıyorsa komut dosyası, işaretçi etkinliklerini ve kaydırmayı izleyerek etkinliğin bitişini mümkün olan en iyi şekilde tahmin eder.

Kullanım alanları

Kaydırma işlemi sırasında yoğun işlem gücü gerektiren işlerden kaçınmak iyi bir uygulamadır. Bu uygulama, kaydırma işleminin mümkün olduğunca fazla bellek ve işlem gücü kullanarak sorunsuz bir deneyim sunmasını sağlar. scrollend etkinliği kullanmak, kaydırma işlemi artık gerçekleşmediğinden, çağrı yapmak ve zor işleri 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 alanlarından biri, ilişkili kullanıcı arayüzü öğelerini kaydırmanın durduğu konumla senkronize etmektir. Örneğin: - Rulo kaydırma konumunu nokta göstergesiyle senkronize etme. - Galeri öğesini meta verileriyle senkronize etme - Kullanıcı yeni bir sekmeye kaydırdıktan sonra verileri getirme

Bir kullanıcının e-postayı kaydırarak sildiği bir senaryo düşünün. Kullanıcı kaydırma işlemini tamamladıktan sonra, kaydırdığı yere göre işlemi gerçekleştirebilirsiniz.

Bu etkinliği, programatik veya kullanıcı kaydırma işleminden sonra ya da analizleri günlüğe kaydetme gibi işlemlerden sonra senkronizasyon için de kullanabilirsiniz.

Oklar, noktalar ve odak gibi birden fazla öğenin kaydırma konumuna göre güncellenmesi gereken iyi bir örnek. Bu bandı nasıl oluşturduğumu YouTube'da izleyin. Ayrıca canlı demoyu deneyebilirsiniz.

Bu konudaki mühendislik çalışmaları için Mehdi Kazemi'ye, API ve uygulama rehberliği için Robert Flack'e teşekkür ederiz.