Scrollend, một sự kiện JavaScript mới

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.

Adam Argyle

Trước sự kiện scrollend, không có cách nào đáng tin cậy để phát hiện một thao tác cuộn đã hoàn tất. Đ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 ở trên màn hình. Việc không đáng tin cậy này trong việc biết 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)
}

Chiến lược setTimeout() này có thể làm được điều tốt nhất là biết liệu thao tác cuộn đã dừng cho 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 bước đánh giá khó khăn này cho bạn.

document.onscrollend = event => {…}

Đó là những điều tốt. Được căn chỉnh thời gian hoàn hảo và chứa đầ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 sẽ 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. – Người dùng đã nhả thao tác chạm. – Con trỏ của người dùng đã thả ngón tay cuộn. – Thao tác nhấn phím của người dùng đã được thả ra. – Đã hoàn tất thao tác cuộn đến mảnh. – Đã hoàn tất thao tác cuộn nhanh. – 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 thay đổi vị trí cuộn nào (không có sự dịch chuyển nào xảy ra). – scrollTo() không dẫn đến bản dịch nào.

Một lý do khiến 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 chi tiết nhỏ cần có thông tin chi tiết về thông số kỹ thuật. Một trong những khía cạnh phức tạp nhất là việc trình bày chi tiết scrollend cho Khung nhìn hình ảnh so với tài liệu. Hãy xem xét một trang web mà bạn thu phóng. 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 trong khung nhìn hình ảnh 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
};

Tiện ích bổ sung và cải tiến 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ì đâ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

Thao tác này sẽ báo cáo true hoặc false 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 (NPM) mà tôi đã tạo để trình duyệt hoạt động tốt nhất có thể:

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

Trình bổ trợ sẽ cải thiện 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ậ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ề thời điểm kết thúc sự kiện.

Trường hợp sử dụng

Bạn nên tránh thực hiện các tác vụ nặng về mặt tính toán trong khi cuộn. Phương pháp này đảm bảo tính năng cuộn có thể sử dụng nhiều bộ nhớ và xử lý nhất có thể để mang lại trải nghiệm mượt mà. Việc sử dụng sự kiện scrollend sẽ cung cấp thời điểm hoàn hảo để gọi ra và thực hiện công việc khó khăn, vì quá trình 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 cuộ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 người dùng vuốt xong, bạn có thể thực hiện hành động dựa trên vị trí 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à ví dụ điển hình về việc cần cập nhật nhiều thành phần như mũi tên, dấu chấm và tiêu điểm 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 thử bản minh hoạ trực tiếp.

Cảm ơn Mehdi Kazemi đã làm việc kỹ thuật về vấn đề này và Robert Flack đã hướng dẫn về API và cách triển khai.