Scrollend, yeni bir JavaScript etkinliği

Zaman aşımı işlevlerinizi silin ve hataları ortadan kaldırın. İşte gerçekten ihtiyacınız olan etkinlik: Scrollend.

Adam Argyle

scrollend etkinliğinden önce, bir kaydırmanın olduğunu algılamanın güvenilir bir yolu yoktu. tamamlandı. Bu durum, etkinliklerin geç veya kullanıcının parmağıyla tetikleneceği anlamına geliyordu hâlâ ekrandaydı. Kaydırmanın ne zaman gerçekleştiğini bilmedeki bu güvenilmezlik kullanıcı için kötü bir deneyime ve hatalara yol açtı.

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

Bu setTimeout() stratejisinin yapabileceği en iyi şey, kaydırmanın şu kadar süre boyunca durup durmadığını öğrenmektir: 100ms. 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 => {…}

İşte bu. Mükemmel zamanlama ve anlamlı koşullarla dolu inceleyin.

Deneyin.

Etkinlik ayrıntıları

scrollend etkinliği şu durumlarda tetiklenir: - Tarayıcı artık kaydırma hareketlerini animasyon gerçekleştirmiyor veya çevirmiyor. - Kullanıcının dokunuşu serbest bırakıldı. - Kullanıcının işaretçisi kaydırma başparmağını serbest bıraktı. - Kullanıcının tuşa basma işlemi iptal edildi. - Parçaya kaydırma tamamlandı. - Kaydırma tutturma işlemi tamamlandı. - scrollTo() tamamlandı. - Kullanıcı görsel görüntü alanını kaydırmıştır.

scrollend etkinliği şu durumlarda tetiklenmez: - Kullanıcının hareketi, kaydırma konumu değişikliklerine neden olmadı (çeviri gerçekleşmedi). - scrollTo(), herhangi bir çeviriyle sonuçlanmadı.

Bu etkinliğin web platformuna ulaşmasının bu kadar uzun sürmesinin bir nedeni de gereken küçük ayrıntılara katkıda bulunabilirsiniz. En karmaşık alanlardan biri Görsel Görünüm için scrollend ayrıntılarını belirtiyordu daha kolay belirleyebilirsiniz. Yakınlaştırdığınız bir web sayfasını düşünün. Kaydırabilirsiniz bu yakınlaştırılmış durumda olduğunda ve sayfayı kaydırmak zorunda 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
});

veya etkinlik ö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. Entegre kodu dallara ayırabilirsiniz:

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

Bu, scrollend etkinliğinizi kademeli olarak geliştirmek için sağlıklı bir başlangıç. kullanılabilir. Ayrıca şunu da deneyebilirsiniz: çoklu dolgu (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

Çoklu dolgu, yerleşik scrollend tarayıcısını kullanacak şekilde kademeli olarak iyileştirilir. etkinliği seçin. 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. Bir scrollend etkinliği kullanarak tüm çabalarınızın karşılığını almak için harika bir fırsattır. Çünkü olmayabileceğini de göz önünde bulundurun.

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.

Bir kullanıcının e-postayı hızlıca kaydırıp bitirdiği gibi 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, program veya kullanıcı tarafından oluşturulan içerik sonrasında senkronizasyon için de kaydırma veya analizleri günlüğe kaydetme gibi işlemlerdir.

Örneğin oklar, noktalar ve odak gibi birden çok öğenin kaydırma konumuna göre güncellenmesi gerekir. YouTube'da bu bandı nasıl oluşturduğumu izleyin. Ayrıca, canlı demoyu da 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.