Document: scrollsnapchange event
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Sự kiện scrollsnapchange của giao diện Document được kích hoạt trên vùng chứa cuộn của tài liệu khi kết thúc thao tác cuộn khi một mục snap cuộn mới được chọn.
Sự kiện này hoạt động tương tự như sự kiện scrollsnapchange của giao diện Element, ngoại trừ việc tài liệu HTML tổng thể phải được đặt làm vùng chứa snap cuộn (tức là scroll-snap-type được đặt trên phần tử <html>).
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("scrollsnapchange", (event) => { })
onscrollsnapchange = (event) => { }
Loại sự kiện
Ví dụ
Sử dụng cơ bản
Giả sử chúng ta có một phần tử <main> chứa nội dung đáng kể khiến nó cuộn:
<main>
<!-- Significant content -->
</main>
Phần tử <main> có thể được biến thành vùng chứa cuộn bằng cách kết hợp các thuộc tính CSS, ví dụ:
main {
width: 250px;
height: 450px;
overflow: scroll;
}
Chúng ta có thể triển khai hành vi snap cuộn trên nội dung đang cuộn bằng cách chỉ định thuộc tính scroll-snap-type trên phần tử <html>:
html {
scroll-snap-type: block mandatory;
}
Đoạn mã JavaScript sau đây sẽ khiến sự kiện scrollsnapchange được kích hoạt trên tài liệu HTML khi một phần tử con của <main> trở thành mục snap mới được chọn. Trong hàm xử lý, chúng ta đặt lớp selected trên phần tử con được tham chiếu bởi SnapEvent.snapTargetBlock, có thể được sử dụng để tạo kiểu cho nó trông như đã được chọn (ví dụ: với một animation) khi sự kiện được kích hoạt.
document.addEventListener("scrollsnapchange", (event) => {
event.snapTargetBlock.classList.add("selected");
});
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Scroll Snap Module Level 2 # scrollsnapchange |
Tương thích trình duyệt
Xem thêm
- Sự kiện
scrollsnapchanging - Sự kiện
scrollend SnapEvent- Thuộc tính CSS
scroll-snap-type - Mô-đun CSS scroll snap
- Sử dụng sự kiện scroll snap
- Scroll Snap Events trên developer.chrome.com (2024)