Menunda Pekerjaan Hingga Scroll Berakhir

Men-scroll di web harus lancar dan responsif. Menjalankan tugas berat—seperti penghitungan ulang tata letak, pelacakan beacon data analisis, atau pembaruan DOM dinamis—selama men-scroll dapat memenuhi thread utama, sehingga menyebabkan frame yang dilewati dan thrashing tata letak.

Secara historis, developer mengandalkan debounce peristiwa scroll menggunakan setTimeout() untuk menebak kapan scroll selesai. Namun, fungsi debounce ini terkenal tidak dapat diandalkan. Iklan ini dapat dipicu saat pengguna masih men-scroll.

Acara scrollend menawarkan solusi yang sangat andal dan berbasis performa. Browser akan memicu peristiwa scrollend tepat saat scroll berhenti, semua transisi selesai, dan gestur sentuh dilepaskan.

Cara Menerapkan

Untuk menerapkan pola tunda pekerjaan:

1. Menyiapkan Penampung yang Dapat Di-scroll: Buat penampung dengan overflow: auto atau overflow: scroll.
2. Memproses peristiwa scroll: Hanya gunakan pemroses ini untuk metrik dinamis dasar atau gaya tata letak yang informatif. Jangan jalankan pekerjaan berat di sini.
3. Memproses peristiwa scrollend: Daftarkan callback scrollend di penampung scroll atau dokumen itu sendiri.
4. Menjalankan tugas yang berat dalam callback: Di sinilah tempat yang aman untuk mengambil konten dinamis atau memicu tata letak DOM yang komprehensif.

Kode Contoh

.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);
});

Penerapan Strategis & Praktik Terbaik

• LAKUKAN penggunaan scrollend, bukan peristiwa scroll yang di-debounce saat mengaktifkan beacon data tata letak atau mengambil tata letak konten baru secara dinamis.
• LAKUKAN pertimbangan untuk menyandingkan ini dengan interaksi snap scrollSnapChange atau scrollSnapChanging jika Anda membuat carousel atau slide galeri testimoni.
• JANGAN menggabungkan update dinamis yang bergantung pada tata letak di dalam callback scroll visual dinamis.
• LAKUKAN pertimbangan bahwa zoom dan scroll area pandang visual memicu peristiwa scrollend dengan benar.

Strategi Penggantian

Untuk browser yang tidak didukung, gunakan peristiwa scroll yang di-debounce dengan setTimeout untuk mengirim peristiwa scrollend kustom.

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);
  });
}