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ı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ğini bilme konusundaki bu güvenilirlik eksikliği, hatalar ve kullanıcı için kötü bir deneyime yol açıyordu.

Önce

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, kaydırma sonlandırıldı etkinliği yerine kaydırma duraklatıldı etkinliği gibi bir durumdur.

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

Sonra

document.onscrollend = event => {…}

Bu iyi bir gelişme. Yayınlanmadan önce mükemmel bir zamanlamayla ve anlamlı koşullarla doludur.

Tarayıcı desteği

• 114
• 114
• 109
• x

Kaynak

Deneyin.

belgesine bakın.

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ş basması serbest bırakıldı. - Parçaya kaydırma 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() hiçbir çeviri sonuç vermedi.

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. Bu yakınlaştırılmış durumdayken sayfayı kaydırabilirsiniz. Bu işlem, belgenin kaydırılmasını gerektirmez. 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
};

Polidoldurmalar ve aşamalı geliştirme

Bu yeni etkinliği hemen kullanmak istiyorsanız size en iyi tavsiyemizi vereceğiz. 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 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, kullanıma sunulduğunda scrollend etkinliğinizi kademeli olarak geliştirmek için sağlıklı bir başlangıçtır. Ayrıca, tarayıcının yapabileceği en iyi performansı gösteren, oluşturduğum polyfill'i (NPM) deneyebilirsiniz:

import {scrollend} from "scrollyfills"

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

polyfill, mevcutsa tarayıcı yerleşik scrollend etkinliğini kullanacak şekilde kademeli olarak geliştirilir. 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 sırasında yoğun hesaplama gerektiren işlemleri yapmaktan kaçının. 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: - Bant kaydırma konumunu bir nokta göstergesiyle senkronize etme. - Bir galeri öğesini meta verileriyle senkronize etme. - Kullanıcı yeni bir sekmeye geçtikten sonra verileri getirme.

Kullanıcının bir e-postayı kaydırarak sildiği bir senaryo düşünün. Kullanıcı kaydırmayı tamamladıktan sonra, kaydırdıkları 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 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 ve API ile uygulama konusundaki rehberliği için Robert Flack'a teşekkür ederiz.