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
sudah selesai. Ini berarti bahwa peristiwa akan terlambat dipicu atau saat jari pengguna
masih berada di bawah layar. Ketidakandalan dalam mengetahui
kapan {i>scrolling<i} telah
benar-benar berakhir, menyebabkan {i>bug <i}dan
pengalaman yang buruk bagi pengguna.
document.onscroll = event => { clearTimeout(window.scrollEndTimer) window.scrollEndTimer = setTimeout(callback, 100) }
Strategi terbaik setTimeout()
ini adalah mengetahui apakah scroll telah berhenti selama
100ms
. Ini membuatnya lebih mirip dengan scroll yang menjeda peristiwa, bukan scroll
acara yang berakhir.
Setelah
scrollend
{i>browser<i} melakukan semua evaluasi
yang sulit ini untuk Anda.
document.onscrollend = event => {…}
Itu hal yang bagus. Tepat waktu yang tepat dan dikemas penuh dengan kondisi yang bermakna sebelum memancarkan.
Cobalah!
Detail acara
Peristiwa scrollend
diaktifkan 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 menghasilkan 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 membutuhkan
detail spesifikasi. Salah satu bidang yang paling kompleks
mengartikulasikan detail scrollend
untuk Area Pandang Visual
dibandingkan dengan dokumen. Pertimbangkan halaman web yang Anda perbesar. Anda dapat men-scroll
saat dalam keadaan diperbesar, dan ini belum tentu menggulir
dokumen. Yakinlah bahwa bahkan scroll yang digerakkan oleh pengguna dalam area pandang visual ini
interaksi Anda 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 bisa mencoba
polyfill
(NPM) buatanku yang paling cocok
browser dapat:
import {scrollend} from "scrollyfills"
// then use scrollend as if it's existed this whole time
document.onscrollend = callback
Polyfill akan secara bertahap meningkatkan penggunaan scrollend
bawaan browser
jika tersedia. Jika tidak tersedia, skrip
mengawasi kejadian pointer dan
scroll untuk memperkirakan kapan peristiwa
tersebut bisa berakhir.
Kasus penggunaan
Praktik yang baik adalah menghindari
pekerjaan komputasi yang berat saat men-scroll
sedang terjadi. Praktik ini memastikan pengguliran bebas untuk menggunakan memori dan
pemrosesan data demi menjaga
pengalaman yang lancar. Menggunakan peristiwa scrollend
adalah waktu yang tepat untuk menyapa dan melakukan kerja keras, karena menggulir
tidak terjadi lagi.
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 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 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 mereka pada hal ini dan Robert Flack untuk API dan panduan penerapan.