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, kaydırma işleminin tamamlandığını tespit etmenin güvenilir bir yolu yoktu. Bu durum, etkinliklerin geç veya kullanıcı parmağı hâlâ ekranda değilken etkinleşeceği anlamına geliyordu. Kaydırmanın ne zaman sona erdiğini bilmedeki bu güvenilmezlik, hatalara ve kullanıcı için kötü bir deneyime yol açtı.

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

Bu setTimeout() stratejisinin yapabileceği en iyi şey, 100ms için kaydırmanın durup durmadığını öğrenmektir. Bu durum, kaydırma işleminin sona ermemesi yerine bir kaydırma işleminin duraklatılmasına neden olur.

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

document.onscrollend = event => {…}

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

Deneyin.

Etkinlik ayrıntıları

scrollend etkinliği şu durumlarda tetiklenir: - Tarayıcı artık animasyon uygulamaz veya kaydırmayı çevirmez. - 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 konumunda herhangi bir değişikliğe neden olmadıysa (çeviri gerçekleşmedi). - scrollTo(), herhangi bir çeviriyle sonuçlanmadı.

Bu etkinliğin web platformuna ulaşmasının bu kadar uzun sürmesinin nedeni, spesifikasyon ayrıntılarına ihtiyaç duyulan çok sayıda küçük ayrıntıydı. En karmaşık alanlardan biri, Görsel Görünüm için scrollend ayrıntılarını belgeyle uyumlu hale getirmekti. Yakınlaştırdığınız bir web sayfasını düşünün. Bu yakınlaştırılmış durumdayken ekranı kaydırabilirsiniz; belgeyi kaydırmanız gerekmez. Kullanıcı tarafından yönlendirilen bu görsel görüntü alanı kaydırma etkileşiminin bile, tamamlandığında scrollend etkinliğini yayınlayacağından emin olabilirsiniz.

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. Mevcut kaydırma sonu stratejinizi (varsa) kullanmaya devam edebilir ve başlangıcında desteği şunlarla 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 raporlar. Bu kontrolü kullanarak kodu dallara ayırabilirsiniz:

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

Bu, kullanıma sunulduğunda scrollend etkinliğinizi kademeli olarak geliştirmek için sağlıklı bir başlangıçtır. Tarayıcının en iyi şekilde çalışmasını sağlayan bir polyfill (NPM) de deneyebilirsiniz:

import {scrollend} from "scrollyfills"

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

Çoklu dolgu, varsa tarayıcının yerleşik scrollend etkinliğini kullanmak için kademeli olarak iyileşir. Bu özellik mevcut değilse komut dosyası, işaretçi etkinliklerini izler ve etkinliği sonlandırabileceği en iyi tahmini elde etmek için ekranı kaydırın.

Kullanım alanları

Kaydırma esnasında işlem yükü açısından ağır iş yapmaktan kaçınmak iyi bir uygulamadır. Bu uygulama, deneyimin sorunsuz olması için kaydırmanın mümkün olduğunca fazla bellek ve işleme serbest bırakılmasını sağlar. Kaydırma artık gerçekleşmediğinden, bir scrollend etkinliği kullanmak, çağrı yapmak ve işin zorunu yapmak için mükemmel bir zamandır.

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ü öğelerinin kaydırmanın durdurulduğu konumla senkronize edilmesidir. Örneğin: - Nokta göstergesi olan 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. Kaydırma işlemi bittikten sonra, 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 ya da analizleri günlüğe kaydetme gibi işlemler için de kullanabilirsiniz.

Oklar, noktalar ve odak gibi birden çok öğenin kaydırma konumuna göre güncellenmesi gereken iyi bir örneği burada bulabilirsiniz. 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.