SnapEvent
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.
Giao diện SnapEvent định nghĩa đối tượng sự kiện cho các sự kiện scrollsnapchanging và scrollsnapchange. Các sự kiện này lần lượt kích hoạt trên một scroll container khi trình duyệt xác định rằng một snap target cuộn mới đang chờ xử lý (sẽ được chọn khi cử chỉ cuộn hiện tại kết thúc), và khi một snap target mới được chọn.
Các sự kiện này có thể được dùng để chạy mã phản hồi các phần tử mới được snap vào; SnapEvent cung cấp tham chiếu đến phần tử được snap trong hướng inline và/hoặc block. Các giá trị thuộc tính có trên SnapEvent tương ứng trực tiếp với giá trị của thuộc tính CSS scroll-snap-type được đặt trên scroll container:
- Nếu trục snap được chỉ định là
block(hoặc giá trị trục vật lý tương đươngblocktrong chế độ viết hiện tại), chỉsnapTargetBlocktrả về tham chiếu phần tử. - Nếu trục snap được chỉ định là
inline(hoặc giá trị trục vật lý tương đươnginlinetrong chế độ viết hiện tại), chỉsnapTargetInlinetrả về tham chiếu phần tử. - Nếu trục snap được chỉ định là
both, cảsnapTargetBlockvàsnapTargetInlineđều trả về tham chiếu phần tử.
Hàm khởi tạo
SnapEvent()Experimental-
Tạo một thực thể đối tượng
SnapEventmới.
Thuộc tính phiên bản
Kế thừa các thuộc tính từ lớp cha, Event.
snapTargetBlockRead only Experimental-
Trả về tham chiếu đến phần tử được snap trong hướng block khi sự kiện kích hoạt, hoặc
nullnếu scroll snapping chỉ xảy ra theo hướng inline và không có phần tử nào được snap trong hướng block. snapTargetInlineRead only Experimental-
Trả về tham chiếu đến phần tử được snap trong hướng inline khi sự kiện kích hoạt, hoặc
nullnếu scroll snapping chỉ xảy ra theo hướng block và không có phần tử nào được snap trong hướng inline.
Ví dụ
Ví dụ về scrollsnapchanging
Trong đoạn code hàm xử lý scrollsnapchanging sau, chúng ta đặt thuộc tính class của phần tử snapTargetBlock thành pending bằng cách dùng thuộc tính Element.className, có thể được dùng để tạo kiểu khác cho phần tử khi nó trở thành snap target đang chờ xử lý.
Lưu ý rằng hàm xử lý này dự định được đặt trên scroll container theo hướng block (cuộn dọc nếu trang được đặt ở writing-mode ngang), do đó chỉ phần tử snapTargetBlock thay đổi giữa nhiều sự kiện kích hoạt. SnapEvent.snapTargetInline sẽ trả về null vì không có snapping nào xảy ra theo hướng inline.
scrollingElem.addEventListener("scrollsnapchanging", (event) => {
// Set current pending snap target class to "pending"
event.snapTargetBlock.className = "pending";
// Logs the new pending block-direction snap target element
console.log(event.snapTargetBlock);
// Logs null; no inline snapping occurs
console.log(event.snapTargetInline);
});
Ví dụ về scrollsnapchange
Trong đoạn code hàm xử lý scrollsnapchange sau, chúng ta đặt class selected trên phần tử SnapEvent.snapTargetBlock, có thể được dùng để tạo kiểu cho snap target mới được chọn trông như thể nó đã được chọn (ví dụ, với một animation).
scrollingElem.addEventListener("scrollsnapchange", (event) => {
event.snapTargetBlock.className = "selected";
});
Thông số kỹ thuật
| Specification |
|---|
| CSS Scroll Snap Module Level 2 # snapevent-interface |
Tương thích trình duyệt
Xem thêm
- Sự kiện
scrollsnapchanging - Sự kiện
scrollsnapchange - Mô-đun CSS scroll snap
- Sử dụng các sự kiện scroll snap
- Scroll Snap Events trên developer.chrome.com (2024)