Document: scroll event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Sự kiện scroll được kích hoạt khi khung nhìn tài liệu đã được cuộn.
Để phát hiện khi việc cuộn đã hoàn tất, xem sự kiện scrollend của Document.
Đối với việc cuộn phần tử, xem sự kiện scroll 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("scroll", (event) => { })
onscroll = (event) => { }
Loại sự kiện
Một Event chung.
Ví dụ
Giới hạn sự kiện scroll
Vì sự kiện scroll có thể được kích hoạt với tốc độ cao, trình xử lý sự kiện không nên thực hiện các thao tác tốn kém tài nguyên tính toán như sửa đổi DOM. Nếu bạn nhận thấy hiện tượng jank khi cuộn nhanh, bạn nên xem xét giới hạn sự kiện.
Lưu ý rằng bạn có thể thấy mã giới hạn trình xử lý sự kiện scroll bằng requestAnimationFrame(). Điều này là vô ích vì các callback animation frame được kích hoạt cùng tốc độ với trình xử lý sự kiện scroll. Thay vào đó, bạn phải tự đo thời gian chờ, chẳng hạn bằng cách sử dụng setTimeout().
let lastKnownScrollPosition = 0;
let ticking = false;
function doSomething(scrollPos) {
// Làm gì đó với vị trí cuộn
}
document.addEventListener("scroll", (event) => {
lastKnownScrollPosition = window.scrollY;
if (!ticking) {
// Giới hạn sự kiện để "do something" mỗi 20ms
setTimeout(() => {
doSomething(lastKnownScrollPosition);
ticking = false;
}, 20);
ticking = true;
}
});
Hoặc, hãy xem xét sử dụng IntersectionObserver thay thế, cho phép lắng nghe dựa trên ngưỡng.
Đặc tả kỹ thuật
| Specification |
|---|
| CSSOM View Module # eventdef-document-scroll |
| HTML # handler-onscroll |