Scrollend, peristiwa JavaScript baru

Hapus fungsi waktu tunggu dan hilangkan bug-nya, berikut peristiwa yang sangat Anda perlukan: scrollend.

Adam Argyle

Sebelum peristiwa scrollend, tidak ada cara yang dapat diandalkan untuk mendeteksi bahwa scroll sudah selesai. Artinya, peristiwa akan diaktifkan terlambat atau saat jari pengguna masih berada di layar. Ketidakandalan dalam mengetahui kapan {i>scrolling<i} telah benar-benar berakhir, menyebabkan {i>bug <i}dan pengalaman yang buruk bagi pengguna.

Sebelum

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

Hal terbaik yang dapat dilakukan strategi setTimeout() ini adalah mengetahui apakah scroll telah berhenti untuk 100ms. Hal ini membuatnya lebih seperti peristiwa scroll telah dijeda, bukan peristiwa scroll telah berakhir.

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

Setelah

document.onscrollend = event => {…}

Itu hal yang bagus. Tepat waktu dan dikemas penuh dengan kondisi yang bermakna sebelum ditampilkan.

Dukungan Browser

• 114
• 114
• 109
• x

Sumber

Cobalah!

Detail acara

Peristiwa scrollend diaktifkan saat: - Browser tidak lagi menganimasikan atau menerjemahkan scroll. - Sentuhan pengguna telah tersedia. - Pointer pengguna telah melepaskan tombol scroll. - Penekanan tombol pengguna telah dilepas. - Scroll ke fragmen telah selesai. - Snap scroll telah selesai. - scrollTo() telah selesai. - Pengguna telah men-scroll area pandang visual.

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

Alasan peristiwa ini membutuhkan waktu lama untuk hadir di platform web adalah karena banyak detail kecil yang memerlukan detail spesifikasi. Salah satu area yang paling kompleks adalah mengartikulasikan detail scrollend untuk Visual Viewport dibandingkan dokumen. Pertimbangkan halaman web yang Anda perbesar. Anda dapat men-scroll saat dalam status zoom ini, dan tidak harus men-scroll dokumen. Jangan khawatir, bahkan interaksi scroll yang didorong pengguna pada area pandang visual ini akan memunculkan peristiwa scrollend setelah selesai.

Menggunakan peristiwa

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 progressive enhancement

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

'onscrollend' in window
// true, if available

Itu akan melaporkan benar atau salah, bergantung apakah browser menawarkan peristiwa. Dengan pemeriksaan ini, Anda dapat mencabangkan kode:

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

Itu adalah awal yang sehat untuk secara bertahap meningkatkan peristiwa scrollend Anda saat yang 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 terus ditingkatkan untuk menggunakan peristiwa scrollend bawaan browser jika tersedia. Jika tidak tersedia, skrip mengawasi kejadian pointer dan scroll untuk memperkirakan kapan peristiwa tersebut bisa berakhir.

Kasus penggunaan

Sebaiknya hindari pekerjaan yang membutuhkan komputasi berat saat scrolling berlangsung. Praktik ini memastikan pengguliran bebas untuk menggunakan memori dan pemrosesan data demi menjaga pengalaman yang lancar. Penggunaan peristiwa scrollend memberikan waktu yang tepat untuk memanggil dan melakukan pekerjaan berat, karena scroll tidak lagi terjadi.

Peristiwa scrollend dapat digunakan untuk memicu berbagai tindakan. Kasus penggunaan umum menyinkronkan elemen UI yang terkait dengan posisi di mana elemen dihentikan. Contoh: - 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 menggeser email. Setelah pengguna selesai menggeser, Anda dapat melakukan tindakan berdasarkan tempat mereka men-scroll.

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

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

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