Document: scrollend event
Baseline
2025
Newly available
Since December 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Sự kiện scrollend được kích hoạt khi khung nhìn tài liệu đã hoàn tất cuộn.
Việc cuộn được coi là hoàn tất khi vị trí cuộn không còn cập nhật đang chờ xử lý và người dùng đã hoàn tất cử chỉ của họ.
Các cập nhật vị trí cuộn bao gồm cuộn chuột trơn tru hoặc tức thì, cuộn bàn phím, các sự kiện scroll-snap, hoặc các API và cử chỉ khác khiến vị trí cuộn cập nhật. Các cử chỉ người dùng như vuốt cảm ứng hoặc cuộn trackpad chưa hoàn tất cho đến khi thả con trỏ hoặc phím. Nếu vị trí cuộn không thay đổi, thì sự kiện scrollend sẽ không được kích hoạt.
Để phát hiện khi việc cuộn bên trong một phần tử hoàn tất, xem sự kiện scrollend của Element.
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt một thuộc tính trình xử lý sự kiện.
addEventListener("scrollend", (event) => { })
onscrollend = (event) => { }
Loại sự kiện
Một Event chung.
Ví dụ
Sử dụng scrollend của Document với event listener
Ví dụ sau đây minh họa cách sử dụng sự kiện scrollend với trình lắng nghe sự kiện để phát hiện khi người dùng dừng cuộn tài liệu.
Trong ví dụ, có nội dung trong iframe nhúng cao hơn và rộng hơn chính iframe, nên có thể cuộn theo cả hai hướng trong iframe.
Khi người dùng dừng cuộn, sự kiện scrollend được kích hoạt:
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p id="output">Waiting on scroll events...</p>
const output = document.querySelector("p#output");
document.addEventListener("scroll", (event) => {
output.textContent = "Document scroll event fired!";
});
document.addEventListener("scrollend", (event) => {
output.textContent = "Document scrollend event fired!";
});
Sử dụng thuộc tính trình xử lý sự kiện onscrollend
Ví dụ sau đây minh họa cách sử dụng thuộc tính trình xử lý sự kiện scrollend để phát hiện khi người dùng dừng cuộn tài liệu.
Trong ví dụ, có nội dung trong iframe nhúng cao hơn và rộng hơn chính iframe, nên có thể cuộn theo cả hai hướng trong iframe.
Ví dụ này xây dựng dựa trên ví dụ đầu tiên, nhưng sử dụng document.onscrollend thay vì trình lắng nghe sự kiện:
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p id="output">Waiting on scroll events...</p>
document.onscroll = (event) => {
output.textContent = "Document scroll event fired!";
};
document.onscrollend = (event) => {
output.textContent = "Document scrollend event fired!";
};
Đặc tả kỹ thuật
| Specification |
|---|
| CSSOM View Module # eventdef-document-scrollend |
| HTML # handler-onscrollend |