IntersectionObserver: observe() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2019.
Phương thức observe() của giao diện IntersectionObserver thêm một phần tử vào tập hợp các phần tử đích đang được theo dõi bởi IntersectionObserver.
Một trình quan sát có một tập hợp ngưỡng và một gốc, nhưng có thể theo dõi nhiều phần tử đích để phát hiện thay đổi khả năng hiển thị theo các ngưỡng đó.
Để dừng quan sát phần tử, hãy gọi IntersectionObserver.unobserve().
Khi khả năng hiển thị của phần tử được chỉ định vượt qua một trong các ngưỡng hiển thị của trình quan sát (như liệt kê trong IntersectionObserver.thresholds), callback của trình quan sát được thực thi với một mảng các đối tượng IntersectionObserverEntry đại diện cho các thay đổi giao nhau đã xảy ra.
Lưu ý rằng thiết kế này cho phép nhiều thay đổi giao nhau của các phần tử được xử lý bởi một lần gọi callback duy nhất.
Note:
Callback của trình quan sát sẽ luôn kích hoạt ở chu kỳ render đầu tiên sau khi observe() được gọi, ngay cả khi phần tử được quan sát chưa di chuyển so với viewport.
Điều này có nghĩa là, ví dụ, một phần tử nằm ngoài viewport khi observe() được gọi sẽ dẫn đến callback được gọi ngay lập tức với ít nhất một mục có intersecting được đặt thành false.
Một phần tử bên trong viewport sẽ dẫn đến callback được gọi ngay lập tức với ít nhất một mục có intersecting được đặt thành true.
Cú pháp
observe(targetElement)
Tham số
targetElement-
Một
elementcó khả năng hiển thị trong gốc cần được theo dõi. Phần tử này phải là phần tử con của phần tử gốc (hoặc nằm trong tài liệu hiện tại, nếu gốc là viewport của tài liệu).
Giá trị trả về
Không có (undefined).
Ví dụ
// Register IntersectionObserver
const io = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
// Add 'active' class if observation target is inside viewport
entry.target.classList.add("active");
} else {
// Remove 'active' class otherwise
entry.target.classList.remove("active");
}
});
});
// Declares what to observe, and observes its properties.
const boxElList = document.querySelectorAll(".box");
boxElList.forEach((el) => {
io.observe(el);
});
Thông số kỹ thuật
| Specification |
|---|
| Intersection Observer # dom-intersectionobserver-observe |