Hapus fungsi waktu tunggu dan hilangkan bug-nya. Inilah peristiwa yang benar-benar Anda perlukan: scrollend.
Sebelum peristiwa scrollend
, tidak ada cara yang dapat diandalkan untuk mendeteksi bahwa scroll
telah selesai. Ini berarti peristiwa akan terlambat dipicu atau saat jari pengguna
masih berada di 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) }
Hal terbaik yang dapat dilakukan strategi setTimeout()
ini adalah mengetahui apakah scroll telah berhenti untuk
100ms
. Hal ini membuatnya seperti scroll telah menjeda peristiwa, bukan peristiwa scroll
telah berakhir.
Setelah peristiwa
scrollend
, browser akan melakukan semua evaluasi yang sulit ini untuk Anda.
document.onscrollend = event => {…}
Itu hal yang bagus. Dijadwalkan secara sempurna dan penuh dengan kondisi yang penting sebelum digunakan.
Cobalah!
Detail acara
Peristiwa scrollend
aktif saat:
- Browser tidak lagi menganimasikan atau menerjemahkan scroll.
- Sentuhan pengguna telah dilepaskan.
- Pointer pengguna telah melepaskan tombol scroll.
- Tekanan tombol 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 jika:
- Gestur pengguna tidak menghasilkan perubahan posisi scroll (terjemahan tidak terjadi).
- scrollTo()
tidak menghasilkan terjemahan apa pun.
Alasan peristiwa ini perlu 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 Visual Viewport dibandingkan dokumen. Bayangkan sebuah halaman web yang Anda perbesar. Anda dapat men-scroll
saat dalam status diperbesar ini, dan itu tidak selalu men-scroll
dokumen. Yakinlah bahwa interaksi scroll yang didorong pengguna area pandang visual
ini pun 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 {i>progressive enhancement<i}
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
Hal itu akan melaporkan benar atau salah, tergantung apakah browser menawarkan peristiwa tersebut. 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)
}
}
Ini adalah awal yang baik untuk meningkatkan peristiwa scrollend
Anda secara bertahap saat
tersedia. Anda juga bisa mencoba polyfill (NPM) yang saya buat yang melakukan yang terbaik yang bisa dilakukan browser:
import {scrollend} from "scrollyfills"
// then use scrollend as if it's existed this whole time
document.onscrollend = callback
Polyfill akan secara bertahap ditingkatkan untuk menggunakan peristiwa scrollend
bawaan browser jika tersedia. Jika tidak tersedia, skrip akan melihat peristiwa pointer dan
men-scroll untuk melakukan perkiraan terbaik terkait peristiwa yang dapat mengakhirinya.
Kasus penggunaan
Sebaiknya hindari pekerjaan yang berat secara komputasi saat scroll
terjadi. Praktik ini memastikan scroll bebas untuk menggunakan memori dan
pemrosesan sebanyak mungkin agar pengalaman tetap lancar. Menggunakan peristiwa scrollend
akan memberikan waktu yang tepat untuk memanggil dan melakukan pekerjaan sulit, karena scroll
tidak lagi dilakukan.
Peristiwa scrollend
dapat digunakan untuk memicu berbagai tindakan. Kasus penggunaan yang umum
adalah menyinkronkan elemen UI terkait dengan posisi scroll
yang dihentikan. Contoh:
- 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 di-scroll terprogram atau pengguna, atau tindakan seperti analisis logging.
Berikut ini contoh yang bagus 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 langsung.
Terima kasih kepada Mehdi Kazemi atas pekerjaan engineering-nya dalam hal ini dan Robert Flack untuk panduan API dan implementasinya.