Xoá các hàm hết thời gian chờ và sửa lỗi, sau đây là sự kiện bạn thực sự cần: scrollend.
Trước sự kiện scrollend, không có cách nào đáng tin cậy để phát hiện xem một thao tác cuộn đã hoàn tất hay chưa. Điều này có nghĩa là các sự kiện sẽ kích hoạt muộn hoặc trong khi ngón tay của người dùng vẫn đang thả trên màn hình. Sự thiếu tin cậy này trong việc biết thời điểm thao tác cuộn thực sự kết thúc, dẫn đến lỗi và trải nghiệm không tốt cho người dùng.
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
Điều tốt nhất mà chiến lược setTimeout() này có thể làm là biết được liệu thao tác cuộn đã dừng trong 100ms hay chưa. Thao tác này giống như thao tác cuộn đã tạm dừng sự kiện, chứ không phải một thao tác cuộn đã kết thúc sự kiện.
Sau sự kiện scrollend, trình duyệt sẽ thực hiện tất cả các hoạt động đánh giá khó khăn này cho bạn.
document.onscrollend = event => {…}
Như vậy là rất tốt. Được xác định đúng thời điểm và có đầy đủ các điều kiện có ý nghĩa trước khi phát.
Hãy làm thử!
Chi tiết sự kiện
Sự kiện scrollend kích hoạt khi:
– Trình duyệt không còn tạo ảnh động hoặc dịch thao tác cuộn.
– Bước chạm của người dùng đã được thả.
– Con trỏ của người dùng đã thả ngón cái cuộn.
– Thao tác nhấn phím của người dùng đã được thả ra.
– Đã hoàn tất việc di chuyển đến mảnh.
– Di chuyển nhanh đã hoàn tất.
– scrollTo() đã hoàn tất.
– Người dùng đã cuộn khung nhìn hình ảnh.
Sự kiện scrollend không kích hoạt khi:
– Cử chỉ của người dùng không dẫn đến bất kỳ thay đổi nào về vị trí cuộn (không diễn ra phiên dịch).
– scrollTo() không đưa ra bản dịch nào.
Nguyên nhân khiến sự kiện này mất nhiều thời gian để triển khai trên nền tảng web là do có nhiều chi tiết nhỏ cần đến thông số kỹ thuật. Một trong những khu vực phức tạp nhất là diễn giải thông tin scrollend của Khung nhìn trực quan so với tài liệu. Xem xét một trang web mà bạn phóng to vào. Bạn có thể cuộn xung quanh khi ở trạng thái thu phóng này và không nhất thiết phải cuộn tài liệu. Hãy yên tâm rằng ngay cả hoạt động tương tác cuộn do người dùng điều khiển của khung nhìn trực quan này cũng sẽ phát ra sự kiện scrollend sau khi hoàn tất.
Sử dụng sự kiện
Tương tự như các sự kiện cuộn khác, bạn có thể đăng ký người nghe theo một số cách.
addEventListener("scrollend", (event) => {
// scroll ended
});
aScrollingElement.addEventListener("scrollend", (event) => {
// scroll ended
});
hoặc sử dụng thuộc tính sự kiện:
document.onscrollend = (event) => {
// scroll ended
};
aScrollingElement.onscrollend = (event) => {
// scroll ended
};
Polyfill và tính năng nâng cao tăng dần
Nếu bạn muốn sử dụng sự kiện mới này ngay bây giờ thì sau đây là lời khuyên tốt nhất của chúng tôi. Bạn có thể tiếp tục sử dụng chiến lược cuối cuộn hiện tại (nếu có) và từ đầu chiến lược, hãy kiểm tra việc hỗ trợ bằng:
'onscrollend' in window
// true, if available
Lệnh này sẽ báo cáo là true (đúng) hoặc false (sai), tuỳ thuộc vào việc trình duyệt có cung cấp sự kiện đó hay không. Với bước kiểm tra này, bạn có thể phân nhánh mã:
if ('onscrollend' in window) {
document.onscrollend = callback
}
else {
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
}
Đây là một khởi đầu thuận lợi để cải thiện dần sự kiện scrollend khi sự kiện này ra mắt. Bạn cũng có thể thử một
polyfill
(kháng nghị!) mà tôi đã thiết kế để làm tốt nhất trình duyệt có thể:
import {scrollend} from "scrollyfills"
// then use scrollend as if it's existed this whole time
document.onscrollend = callback
Polyfill sẽ tăng dần để sử dụng sự kiện scrollend tích hợp sẵn của trình duyệt nếu có. Nếu không có tính năng này, tập lệnh sẽ theo dõi các sự kiện con trỏ và cuộn để ước tính chính xác nhất về sự kiện kết thúc.
Trường hợp sử dụng
Bạn nên tránh khối lượng công việc tính toán nặng nề trong khi cuộn. Phương pháp này đảm bảo tính năng cuộn thoải mái sử dụng nhiều bộ nhớ và xử lý nhất có thể để giữ cho trải nghiệm mượt mà. Việc sử dụng sự kiện scrollend là thời điểm hoàn hảo để gọi và làm phần việc khó khăn vì thao tác cuộn không còn diễn ra nữa.
Bạn có thể dùng sự kiện scrollend để kích hoạt nhiều hành động. Một trường hợp sử dụng phổ biến là đồng bộ hoá các phần tử trên giao diện người dùng có liên kết với vị trí dừng cuộn. Ví dụ:
– Đồng bộ hoá vị trí cuộn băng chuyền với chỉ báo dấu chấm.
- Đồng bộ hoá một mục trong thư viện với siêu dữ liệu của mục đó.
– Tìm nạp dữ liệu sau khi người dùng di chuyển đến một thẻ mới.
Hãy tưởng tượng một tình huống như người dùng vuốt qua email. Sau khi họ vuốt xong, bạn có thể thực hiện hành động dựa trên vị trí mà họ cuộn đến.
Bạn cũng có thể sử dụng sự kiện này để đồng bộ hoá sau khi cuộn người dùng hoặc lập trình, hoặc các hành động như ghi nhật ký số liệu phân tích.
Sau đây là một ví dụ điển hình, trong đó nhiều phần tử như mũi tên, dấu chấm và tiêu điểm cần được cập nhật dựa trên vị trí cuộn. Xem cách tôi tạo băng chuyền này trên YouTube. Ngoài ra, hãy dùng thử bản minh hoạ trực tiếp.
Xin chân thành cảm ơn Mehdi Kazemi vì những đóng góp về kỹ thuật trong nghiên cứu này và với Robert Flack về API cũng như hướng dẫn triển khai.