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 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.