Hapus fungsi waktu tunggu dan hilangkan bug-nya, berikut peristiwa yang sangat Anda perlukan: scrollend.
Sebelum peristiwa scrollend
, tidak ada cara yang dapat diandalkan untuk mendeteksi bahwa scroll
telah selesai. Artinya, peristiwa akan terlambat dipicu atau saat jari pengguna masih berada di bawah layar. Ketidakandalan dalam mengetahui kapan scroll
benar-benar berakhir, yang menyebabkan bug dan pengalaman yang buruk bagi pengguna.
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 scroll yang telah menjeda peristiwa, bukan peristiwa yang telah berakhir pada scroll.
Setelah peristiwa scrollend
, browser akan melakukan semua evaluasi yang sulit ini untuk Anda.
document.onscrollend = event => {…}
Itu hal yang bagus. Tepat waktu dan dikemas dengan penuh kondisi penting sebelum dipancarkan.
Cobalah!
Detail acara
Peristiwa scrollend
aktif saat:
- Browser tidak lagi menganimasikan atau menerjemahkan scroll.
- Sentuhan pengguna telah tersedia.
- Pointer pengguna telah melepas tombol scroll.
- Penekanan tombol pengguna telah dilepas.
- Scroll ke fragmen telah selesai.
- Pengepasan scroll telah selesai.
- scrollTo()
telah selesai.
- Pengguna telah men-scroll area pandang visual.
Peristiwa scrollend
tidak diaktifkan saat:
- Gestur pengguna tidak menyebabkan perubahan posisi scroll apa pun (tidak ada terjemahan).
- scrollTo()
tidak menghasilkan terjemahan apa pun.
Alasan peristiwa ini memerlukan waktu begitu lama untuk masuk ke platform web adalah karena banyaknya detail kecil yang memerlukan detail spesifikasi. Salah satu area yang paling kompleks
adalah mengartikulasikan detail scrollend
untuk Area Pandang Visual
dibandingkan dokumen. Pertimbangkan halaman web yang Anda perbesar. Anda dapat men-scroll
saat dalam status diperbesar ini, dan belum tentu men-scroll
dokumen. Yakinlah bahwa bahkan interaksi scroll berbasis pengguna dalam 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 menggunakan strategi akhir scroll saat ini (jika ada) dan di 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
tersedia. Anda juga dapat mencoba polyfill (NPM) yang saya buat dengan kemampuan terbaik browser:
import {scrollend} from "scrollyfills"
// then use scrollend as if it's existed this whole time
document.onscrollend = callback
Polyfill akan secara bertahap meningkatkan penggunaan peristiwa scrollend
bawaan browser jika tersedia. Jika tidak tersedia, skrip akan mengamati peristiwa pointer dan
men-scroll untuk melakukan perkiraan terbaik tentang akhiran peristiwa yang dapat dilakukan.
Kasus penggunaan
Sebaiknya hindari pekerjaan yang berat secara komputasi saat men-scroll
terjadi. Praktik ini memastikan scroll bebas untuk menggunakan memori dan
pemrosesan sebanyak mungkin untuk menjaga pengalaman tetap lancar. Menggunakan peristiwa scrollend
memberikan waktu yang tepat untuk memanggil dan melakukan kerja keras, karena scroll
tidak lagi terjadi.
Peristiwa scrollend
dapat digunakan untuk memicu berbagai tindakan. Kasus penggunaan yang umum
adalah menyinkronkan elemen UI terkait dengan posisi scroll
berhenti. Misalnya:
- Menyinkronkan posisi scroll carousel dengan indikator titik.
- Menyinkronkan item galeri dengan metadatanya.
- Mengambil data setelah pengguna men-scroll ke tab baru.
Bayangkan sebuah skenario seperti pengguna menggeser email. Setelah mereka selesai menggeser, Anda dapat melakukan tindakan berdasarkan tempat mereka men-scroll.
Anda juga dapat menggunakan peristiwa ini untuk menyinkronkan setelah melakukan scroll terprogram atau pengguna, atau tindakan seperti logging analisis.
Berikut adalah contoh bagus saat beberapa elemen seperti panah, titik, dan fokus, perlu diupdate berdasarkan posisi scroll. Tonton bagaimana saya membuat carousel ini di YouTube. Selain itu, coba demo langsung.
Terima kasih kepada Mehdi Kazemi atas pekerjaan engineering mereka pada hal ini dan Robert Flack untuk API dan panduan penerapan.