Scrollend, yeni bir JavaScript etkinliği

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

Adam Argyle

Twitter GitHub

scrollend etkinliğinden önce, kaydırma işleminin tamamlandığını belirlemenin güvenilir bir yolu bulunmuyordu. Bu, etkinliklerin geç geçeceği veya bir kullanıcının parmağı hâlâ ekranın üzerindeyken etkinleşeceği anlamına geliyordu. Kaydırmanın ne zaman sona erdiğini bilmenin bu güvensizliği, hatalara ve kullanıcı için kötü bir deneyime yol açtı.

Ö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 durum, bu durumu daha çok bir kaydırma sona erme işleminin değil, kaydırmanın duraklattığı etkinlik gibi gösterir.

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

Sonra

document.onscrollend = event => {…}

İşin iyi tarafı bu. Yayılmadan önce kusursuz bir şekilde zamanlanmış ve anlamlı koşullarla donatılmıştır.

Tarayıcı Desteği

• 114
• 114
• 109
• x

Kaynak

Deneyin.

Etkinlik ayrıntıları

scrollend etkinliği şu durumlarda tetiklenir: - Tarayıcı artık kaydırmayı animasyon haline getirmediğinde veya çevirmediğinde tetiklenir. - 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ş basma işlemi iptal edildi. - Parçaya kaydırma tamamlandı. - Kaydırma tutturma tamamlandı. - scrollTo() tamamlandı. - Kullanıcı, görsel görüntü alanını kaydırmıştır.

scrollend etkinliği şu durumlarda etkinleşmez: - Bir kullanıcının hareketi kaydırma konum değişikliklerine 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 gereken çok sayıda küçük ayrıntıydı. En karmaşık alanlardan biri, dokümana karşılık Görsel Görünüm için scrollend ayrıntılarının açıkça belirtilmesiydi. Yakınlaştırdığınız bir web sayfasını düşünün. Bu yakınlaştırma modundayken kaydırma yapabilirsiniz ve bu her zaman dokümanı kaydırmak zorunda değildir. Kullanıcı tarafından yönlendirilen bu görsel görüntü alanı kaydırma etkileşiminin bile, tamamlandıktan sonra scrollend etkinliğini yayınlayacağından emin olabilirsiniz.

Etkinliği kullanma

Diğer kaydırma etkinliklerinde olduğu gibi, işleyicileri 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 dolgu ve progresif geliştirme

Bu yeni etkinliği hemen kullanmak istiyorsanız aşağıdaki önerilerden yararlanabilirsiniz. Mevcut kaydırma sonu stratejinizi (varsa) kullanmaya devam edebilir ve sürecin başında desteği aşağıdakilerle 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 kollara ayırabilirsiniz:

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

Bu, kullanılabilir olduğunda scrollend etkinliğinizi kademeli olarak geliştirmek için sağlıklı bir başlangıçtır. Tarayıcının yapabileceği en iyi performansı gösteren polyfill'i (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 kullanacak şekilde kademeli olarak iyileştirilir. Mevcut değilse komut dosyası işaretçi etkinliklerini izler ve sona eren etkinlik hakkında en iyi tahmini yapmak için kaydırır.

Kullanım alanları

Kaydırma işlemi yapılırken hesaplama açısından ağır işlerden kaçınmak iyi bir uygulamadır. Bu uygulama, kaydırma deneyiminin sorunsuz olması için mümkün olduğunca fazla bellek ve işleme serbest olmasını sağlar. Kaydırma artık gerçekleşmediğinden scrollend etkinliğini kullanmak, iş çağırmak 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 bir kullanım alanı, ilişkili kullanıcı arayüzü öğelerinin kaydırmanın durdurulduğu konumla senkronize edilmesidir. Örneğin: - Nokta göstergesiyle bir bant kaydırma konumunu senkronize etme. - Bir galeri öğesini meta verileriyle senkronize etme. - Kullanıcı, sayfayı yeni bir sekmeye kaydırdıktan sonra veri getirme.

Bir kullanıcının e-postayı hızlıca kaydırarak kapatması gibi bir senaryo düşünün. Kaydırma işlemini bitirdikten sonra, nereye kaydırdıklarına bağlı olarak işlemi gerçekleştirebilirsiniz.

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

Oklar, noktalar ve odak gibi birden çok öğenin kaydırma konumuna göre güncellenmesinin gerektiği iyi bir örneği aşağıda görebilirsiniz. YouTube'da bu bandı nasıl oluşturduğumu izleyin. Ayrıca, canlı demoyu deneyin.

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