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

Xoá các hàm hết thời gian chờ và xử lý các lỗi của chúng, đây là sự kiện bạn thực sự cần: scrollend.

Adam Argyle

Twitter GitHub

Trước sự kiện scrollend, không có cách đáng tin cậy nào để phát hiện xem 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 khi ngón tay của người dùng vẫn đặt trên màn hình. Tình trạng không đáng tin cậy khi biết được thời điểm cuộn thực sự đã kết thúc, dẫn đến các 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)
}

Tốt nhất là chiến lược setTimeout() này có thể biết liệu 100ms đã dừng cuộn hay chưa. Điều này giống như sự kiện cuộn đã tạm dừng sự kiện, chứ không phải sự kiện cuộn đã kết thúc.

Sau sự kiện scrollend, trình duyệt sẽ thực hiện toàn bộ việc đánh giá khó khăn này cho bạn.

document.onscrollend = event => {…}

Tốt lắm. Được xác định thời điểm hoàn hảo và có đầy đủ đ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 hoạt động cuộn. – Thao tác chạm của người dùng đã thả ra. – Con trỏ của người dùng đã thả ngón tay cái cuộn. – Đã nhả phím của người dùng. – Thao tác cuộn đến mảnh đã hoàn tất. – Đã hoàn tất thao tác chụp nhanh. – scrollTo() đã hoàn tất. – Người dùng đã cuộn vào 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 xảy ra bản dịch). - scrollTo() không tạo ra bản dịch nào.

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 thông tin chi tiết về quy cách. Một trong những khu vực phức tạp nhất là việc xác định rõ ràng thông tin chi tiết về scrollend cho Khung nhìn hình ảnh và tài liệu. Hãy xem xét một trang web mà bạn phóng to. 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ý trình nghe theo một vài 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
};

Tệp 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ờ, 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 kết thúc cuộn hiện tại (nếu có) và khi bắt đầu chiến lược, hãy kiểm tra khả năng hỗ trợ với:

'onscrollend' in window
// true, if available

Thao tác này sẽ báo cáo kết quả 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. Ở 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 để dần cải thiện sự kiện scrollend khi sự kiện này có sẵn. Bạn cũng có thể thử polyfill (Nằm trong luồng) mà tôi đã thực hiện để có thể hoạt động tốt nhất mà trình duyệt có thể:

import {scrollend} from "scrollyfills"

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

Tính năng polyfill sẽ dần được cải thiệ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ó sẵn, tập lệnh sẽ xem các sự kiện con trỏ và cuộn để ước tính chính xác nhất sự kiện kết thúc có thể.

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

Đây là một phương pháp hay để tránh các công việc tính toán nặng nề khi quá trình cuộn đang diễn ra. Phương pháp này đảm bảo thao tác cuộn có thể 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 tên và làm công 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 thành phần 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 trong 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 thao tác dựa trên vị trí người dùng cuộn đến.

Bạn cũng có thể sử dụng sự kiện này để đồng bộ hoá sau khi người dùng cuộn hoặc có lập trình, hoặc thực hiện các hành động như phân tích nhật ký.

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.

Cảm ơn Mehdi Kazemi đã hỗ trợ kỹ thuật trong lĩnh vực này và Robert Flack cho biết API và hướng dẫn triển khai.