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 thao tác cuộn
đã hoàn tất. Điều này có nghĩa là 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 ở trên màn hình. Sự không đáng tin cậy này khi biết được thời điểm cuộn
thực sự đã kết thúc, dẫn đến lỗi và trải nghiệm kém 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 đã bị dừng trong
100ms
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 thao tác cuộn
sự kiện đã kết thúc.
Sau
scrollend
trình duyệt sẽ thực hiện tất cả việc đánh giá khó khăn này cho bạn.
document.onscrollend = event => {…}
Như vậy là rất tốt. Đúng thời điểm và cung cấp nhiều đ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 hoạt độ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 dịch).
– scrollTo()
không đưa ra bản dịch nào.
Lý do sự kiện này mất nhiều thời gian để xuất hiện trên nền tảng web là do có nhiều
các chi tiết nhỏ cần chi tiết về quy cách. Một trong những khu vực phức tạp nhất
đã giải thích chi tiết scrollend
cho 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ả thao tác cuộn do người dùng điều khiển của khung nhìn trực quan này
tương tác 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à ở đầu tiên, hãy kiểm tra dịch vụ 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. Bằng sau 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
có sẵn. Bạn cũng có thể thử
polyfill
(NM) mà tôi đã tạo ra là bài viết 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ẽ dần được cải thiện để sử dụng scrollend
tích hợp sẵn cho trình duyệt
sự kiện nếu có. Nếu không được cung cấp, tập lệnh sẽ theo dõi các sự kiện con trỏ và
di chuyển để phỏng đoán chính xác nhất về sự kiện có thể 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
đang xảy ra. Phương pháp này đảm bảo việc cuộn miễn phí để sử dụng nhiều bộ nhớ và
xử lý nhanh nhất có thể để mang lại trải nghiệm mượt mà. Sử dụng sự kiện scrollend
mang đến thời gian hoàn hảo để gọi tên và làm công việc khó khăn, bởi vì cuộn là
điều này không còn xảy ra nữa.
Bạn có thể dùng sự kiện scrollend
để kích hoạt nhiều hành động. Trường hợp sử dụng phổ biến
đang đồng bộ hoá các thành phần trên giao diện người dùng có liên quan với vị trí mà thao tác cuộn
đã dừng. 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ọ kết thúc rồi vuốt, bạn có thể thực hiện hành động dựa trên vị trí mà người dùng cuộn tới.
Bạn cũng có thể sử dụng sự kiện này để đồng bộ hoá sau khi người dùng hoặc người dùng có lập trình hoặc các thao tác như ghi nhật ký số liệu phân tích.
Sau đây là ví dụ điển hình trong đó có nhiều yếu 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.