Scrollend, peristiwa JavaScript baru

Hapus fungsi waktu tunggu Anda dan hilangkan bugnya, berikut adalah peristiwa yang benar-benar Anda butuhkan: scrollend.

Adam Argyle

Sebelum peristiwa scrollend, tidak ada cara yang andal untuk mendeteksi bahwa scroll telah selesai. Artinya, peristiwa akan terlambat dipicu atau saat jari pengguna masih menekan layar. Ketidakandalan dalam mengetahui kapan scroll benar-benar berakhir menyebabkan bug dan pengalaman yang buruk bagi pengguna.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Strategi setTimeout() ini hanya dapat mengetahui apakah scroll telah berhenti untuk 100ms. Hal ini menjadikannya lebih seperti peristiwa scroll telah dijeda, bukan peristiwa scroll telah berakhir.

Setelah peristiwa scrollend, browser akan melakukan semua evaluasi sulit ini untuk Anda.

document.onscrollend = event => {…}

Itu baru bagus. Ditentukan waktunya dengan sempurna dan penuh dengan kondisi yang bermakna sebelum dipancarkan.

Cobalah!

Detail acara

Peristiwa scrollend diaktifkan saat: - Browser tidak lagi menganimasikan atau menerjemahkan scroll. - Sentuhan pengguna telah dilepaskan. - Pointer pengguna telah melepaskan tuas scroll. - Tombol yang ditekan pengguna telah dilepaskan. - Scroll ke fragmen telah selesai. - Scroll snap telah selesai. - scrollTo() telah selesai. - Pengguna telah men-scroll area pandang visual.

Peristiwa scrollend tidak diaktifkan saat: - Gestur pengguna tidak menghasilkan perubahan posisi scroll (tidak ada terjemahan). - scrollTo() tidak menghasilkan terjemahan apa pun.

Salah satu alasan peristiwa ini membutuhkan waktu lama untuk hadir di platform web adalah karena banyaknya detail kecil yang memerlukan detail spesifikasi. Salah satu area yang paling kompleks adalah mengartikulasikan detail scrollend untuk Viewport Visual versus dokumen. Pertimbangkan halaman web yang Anda perbesar. Anda dapat men-scroll saat dalam status diperbesar ini, dan tidak selalu men-scroll dokumen. Yakinlah bahwa interaksi scroll yang digerakkan pengguna di viewport visual ini pun akan memancarkan peristiwa scrollend setelah selesai.

Menggunakan acara

Seperti peristiwa scroll lainnya, Anda dapat mendaftarkan pemroses dengan beberapa cara.

addEventListener("scrollend", (event) => {
  // scroll ended
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // scroll ended
});

atau, gunakan properti peristiwa:

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

Polyfill dan peningkatan progresif

Jika Anda ingin menggunakan acara baru ini sekarang, berikut saran terbaik kami. Anda dapat terus menggunakan strategi akhir scroll saat ini (jika Anda memilikinya) dan di awalnya, periksa dukungan dengan:

'onscrollend' in window
// true, if available

Hal ini akan melaporkan nilai benar atau salah, bergantung pada apakah browser menawarkan peristiwa tersebut. Dengan pemeriksaan ini, Anda dapat membuat cabang kode:

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

Itu adalah awal yang baik untuk meningkatkan kualitas acara scrollend Anda secara progresif saat acara tersebut tersedia. Anda juga dapat mencoba polyfill (NPM) yang saya buat yang melakukan yang terbaik yang dapat dilakukan browser:

import {scrollend} from "scrollyfills"

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

Polyfill akan ditingkatkan secara progresif untuk menggunakan peristiwa scrollend bawaan browser jika tersedia. Jika tidak tersedia, skrip akan memantau peristiwa penunjuk dan men-scroll untuk melakukan perkiraan terbaik tentang akhir peristiwa.

Kasus penggunaan

Sebaiknya hindari tugas yang berat secara komputasi saat men-scroll. Praktik ini memastikan penelusuran bebas menggunakan memori dan pemrosesan sebanyak yang dapat dilakukan untuk menjaga kelancaran pengalaman. Menggunakan peristiwa scrollend memberikan waktu yang tepat untuk memanggil dan melakukan tugas berat, karena scrolling tidak lagi terjadi.

Peristiwa scrollend dapat digunakan untuk memicu berbagai tindakan. Kasus penggunaan umum adalah menyinkronkan elemen UI terkait dengan posisi saat scroll berhenti. Misalnya: - Menyinkronkan posisi scroll carousel dengan indikator titik. - Menyinkronkan item galeri dengan metadata-nya. - Mengambil data setelah pengguna men-scroll ke tab baru.

Bayangkan skenario seperti pengguna yang menggeser email untuk menutupnya. Setelah mereka selesai menggeser, Anda dapat melakukan tindakan berdasarkan tempat mereka men-scroll.

Anda juga dapat menggunakan peristiwa ini untuk menyinkronkan setelah scroll terprogram atau pengguna, atau tindakan seperti mencatat analisis.

Berikut adalah contoh yang baik saat beberapa elemen seperti panah, titik, dan fokus, perlu diperbarui berdasarkan posisi scroll. Tonton cara saya membuat carousel ini di YouTube. Selain itu, coba demo langsungnya.

Terima kasih kepada Mehdi Kazemi atas pekerjaan engineering-nya dalam hal ini dan Robert Flack atas panduan API dan implementasinya.