Document: scrollsnapchanging 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 scrollsnapchanging của giao diện Document được kích hoạt trên vùng chứa cuộn khi trình duyệt xác định một mục snap cuộn mới đang chờ xử lý, tức là nó sẽ được chọn khi cử chỉ cuộn hiện tại kết thúc.
Sự kiện này hoạt động tương tự như sự kiện scrollsnapchanging 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("scrollsnapchanging", (event) => { })
onscrollsnapchanging = (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 scrollsnapchanging đượ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 đang chờ xử lý. Trong hàm xử lý, chúng ta đặt lớp pending trên phần tử con được tham chiếu bởi thuộc tính snapTargetBlock, có thể được sử dụng để tạo kiểu khác đi khi sự kiện được kích hoạt.
document.addEventListener("scrollsnapchanging", (event) => {
// xóa các lớp "pending" đã đặt trước đó
const pendingElems = document.querySelectorAll(".pending");
pendingElems.forEach((elem) => {
elem.classList.remove("pending");
});
// Đặt lớp mục snap đang chờ hiện tại thành "pending"
event.snapTargetBlock.classList.add("pending");
});
Ở đầu hàm, chúng ta chọn tất cả các phần tử trước đó đã áp dụng lớp pending và xóa nó, để chỉ mục tiêu snap đang chờ gần nhất được tạo kiểu.
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Scroll Snap Module Level 2 # scrollsnapchanging |
Tương thích trình duyệt
Xem thêm
- Sự kiện
scrollsnapchange - 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)