Scrollend, yeni bir JavaScript etkinliği

Zaman aşımı işlevlerinizi silin ve hatalarından kurtulun. Gerçekten ihtiyacınız olan etkinlik: scrollend.

Adam Argyle

scrollend etkinliğinden önce, kaydırmanın tamamlandığını güvenilir bir şekilde tespit etmenin yolu yoktu. Bu durum, etkinliklerin geç tetiklenmesine veya kullanıcının parmağı ekrandayken tetiklenmesine neden oluyordu. Kaydırmanın ne zaman gerçekten sona erdiğini bilmenin güvenilir olmaması, hatalara ve kullanıcının kötü bir deneyim yaşamasına neden oluyordu.

Önce

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ı bilmektir. Bu durumda, kaydırma işlemi sona erdi etkinliği yerine kaydırma işlemi duraklatıldı etkinliği tetiklenir.

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

Sonra

document.onscrollend = event => {…}

İşte bu iyi bir şey. Mükemmel zamanlanmış ve yayınlanmadan önce anlamlı koşullarla dolu.

Browser Support

• 114
• 114
• 109
• 

Source

Deneyin.

(Codepen'de web-dot-dev tarafından oluşturulan rNrJRKg adlı kalem)

Etkinlik ayrıntıları

scrollend etkinliği şu durumlarda tetiklenir: - Tarayıcı artık kaydırma işlemini canlandırmıyor veya çevirmiyor. - Kullanıcının dokunuşu bırakılmıştır. - Kullanıcının işaretçisi, kaydırma tutamacını bıraktı. - Kullanıcının tuşa basma işlemi bırakılmıştır. - Parçaya kaydırma işlemi tamamlandı. - Kaydırma tutturma tamamlandı. - scrollTo() tamamlandı. - Kullanıcı, görsel görüntü alanını kaydırmışsa

scrollend etkinliği şu durumlarda tetiklenmez: - Kullanıcının hareketi, kaydırma konumunda herhangi bir değişikliğe neden olmadı (çeviri yapılmadı). - scrollTo() çeviriyle sonuçlanmadı.

Bu etkinliğin web platformuna bu kadar geç gelmesinin nedeni, belirtilmesi gereken birçok küçük ayrıntı olmasıdır. En karmaşık alanlardan biri, görsel görünüm penceresi ile doküman arasındaki scrollend ayrıntıların açıklanmasıydı. Yakınlaştırdığınız bir web sayfasını düşünün. Bu yakınlaştırılmış durumdayken etrafı kaydırabilirsiniz. Bu durumda, belge kaydırılmayabilir. Bu görsel görünüm penceresi kullanıcı odaklı kaydırma etkileşiminin 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
});

Alternatif olarak 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 en iyi tavsiyelerimizi aşağıda bulabilirsiniz. Mevcut kaydırma sonu stratejinizi (varsa) kullanmaya devam edebilir ve stratejinin başında aşağıdaki destekleri 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 bildirir. 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ğiniz kullanıma sunulduğunda etkinliğinizi kademeli olarak iyileştirmek için sağlıklı bir başlangıçtır. Ayrıca, tarayıcının yapabileceği en iyi şeyi yapan bir polyfill (NPM) de deneyebilirsiniz:

import {scrollend} from "scrollyfills"

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

Polyfill, tarayıcıda yerleşik scrollendetkinliği varsa bunu kullanmak için kademeli olarak geliştirilir. Kullanılamıyorsa komut dosyası, işaretçi etkinliklerini izler ve etkinliğin bitişiyle ilgili en iyi tahmini yapmak için kaydırma yapar.

Kullanım alanları

Kaydırma işlemi sırasında hesaplama açısından ağır işlerden kaçınmak iyi bir uygulamadır. Bu uygulama, deneyimin sorunsuz olması için kaydırma özelliğinin mümkün olduğunca fazla bellek ve işlem gücü kullanmasını sağlar. scrollend etkinliğini kullanmak, kaydırma işlemi artık gerçekleşmediği için harekete geçirici mesajı göstermek ve zorlu 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 bir kullanım alanı, ilişkili kullanıcı arayüzü öğelerini kaydırmanın durduğu konumla senkronize etmektir. Örneğin: - Bir bant 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ırdığını düşünün. Kullanıcılar kaydırma işlemini tamamladıktan sonra, kaydırdıkları yere göre işlemi gerçekleştirebilirsiniz.

Bu etkinliği, programatik veya kullanıcı kaydırmasından sonra ya da analizleri kaydetme gibi işlemlerden sonra senkronizasyon için de kullanabilirsiniz.

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

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.