Kaydırma işlemi bitene kadar çalışmayı ertele

Web'de kaydırma işlemi sorunsuz ve duyarlı olmalıdır. Kaydırma sırasında düzen yeniden hesaplamaları, analiz verileri işaretçi takibi veya dinamik DOM güncellemeleri gibi ağır görevlerin yürütülmesi, ana iş parçacığını doldurarak karelerin düşmesine ve düzenin bozulmasına neden olabilir.

Geçmişte geliştiriciler, kaydırma işleminin ne zaman bittiğini tahmin etmek için setTimeout() kullanarak scroll etkinliğini geciktiriyordu. Ancak bu debounced işlevleri güvenilir değildir. Kullanıcı sayfayı kaydırırken tetiklenebilirler.

scrollend etkinliği, son derece güvenilir ve performans odaklı bir çözüm sunar. Tarayıcı, kaydırma işlemi durduğunda, tüm geçişler tamamlandığında ve dokunma hareketi bırakıldığında tam olarak bir scrollend etkinliği tetikler.

Nasıl uygulanır?

Çalışmayı erteleme modelini uygulamak için:

1. Kaydırılabilir kapsayıcı oluşturma: overflow: auto veya overflow: scroll ile bir kapsayıcı oluşturun.
2. scroll etkinliklerini dinleme: Bu dinleyiciyi yalnızca temel dinamik metrikler veya bilgilendirici düzen stili için kullanın. Burada ağır işler yapmayın.
3. scrollend etkinliklerini dinleme: Kaydırma kapsayıcısına veya belgenin kendisine bir scrollend geri çağırma işlevi kaydedin.
4. Geri çağırmada maliyetli işleri yürütme: Dinamik içerik getirmenin veya kapsamlı DOM düzenlerini tetiklemenin güvenli olduğu yer burasıdır.

Örnek Kod

.scroll-container {
  height: 300px;
  overflow-y: auto;
}

const scroller = document.querySelector('.scroll-container');

// 1. Informative feedback during scroll
scroller.addEventListener('scroll', () => {
  // Avoid dynamic heavier data updates here
  console.log('Scrolling dynamically... updates deferred');
});

// 2. Safe callback when scrolling rests
scroller.addEventListener('scrollend', () => {
  // Run layout recalculations or analytical beacons updates here
  const currentVisibleSection = findMostVisibleSection(scroller);
  fetchAdditionalData(currentVisibleSection);
});

Stratejik Uygulama ve En İyi Uygulamalar

• Düzen verisi işaretçilerini etkinleştirirken veya yeni içerik düzenini dinamik olarak getirirken, debounced scroll etkinlikleri yerine scrollend KULLANIN.
• ÖNERİ: Carousel veya referans galerisi slaytları oluşturuyorsanız bunu scrollSnapChange veya scrollSnapChanging kaydırma etkileşimleriyle eşleştirmeyi düşünün.
• Düzene bağlı dinamik güncellemeleri, dinamik görsel kaydırma geri çağırmaları içinde BİRLEŞTİRMEYİN.
• ÖNERİ: Görsel görüntü alanında yakınlaştırma ve kaydırma işlemlerinin scrollend etkinliğini doğru şekilde tetiklediğini göz önünde bulundurun.

Yedek strateji

Desteklenmeyen tarayıcılar için özel bir scrollend etkinliği göndermek üzere setTimeout ile birlikte geciktirilmiş bir scroll etkinliğine geri dönün.

function initializeDemo() {
  const scroller = document.querySelector('#scroller');
  scroller.addEventListener('scrollend', () => {
    // Safe execution
  });
}

if ('onscrollend' in window) {
  initializeDemo();
} else {
  initializeDemo();
  const scroller = document.querySelector('#scroller');
  scroller.addEventListener('scroll', () => {
    clearTimeout(window.scrollendtimer);
    window.scrollendtimer = setTimeout(() => {
      scroller.dispatchEvent(new CustomEvent('scrollend'));
    }, 100);
  });
}