IntersectionObserver
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.
* Some parts of this feature may have varying levels of support.
Giao diện IntersectionObserver thuộc Intersection Observer API cung cấp một cách để quan sát không đồng bộ các thay đổi trong sự giao nhau của một phần tử đích với một phần tử tổ tiên hoặc với viewport của tài liệu cấp cao nhất. Phần tử tổ tiên hoặc viewport được gọi là gốc (root).
Khi một IntersectionObserver được tạo ra, nó được cấu hình để theo dõi các tỷ lệ hiển thị nhất định trong phần tử gốc. Cấu hình không thể thay đổi sau khi IntersectionObserver được tạo, vì vậy một đối tượng trình quan sát chỉ hữu ích cho việc theo dõi các thay đổi cụ thể về mức độ hiển thị; tuy nhiên, bạn có thể theo dõi nhiều phần tử đích với cùng một trình quan sát.
Hàm khởi tạo
IntersectionObserver()-
Tạo một đối tượng
IntersectionObservermới, đối tượng này sẽ thực thi một hàm callback được chỉ định khi phát hiện khả năng hiển thị của một phần tử đích đã vượt qua một hoặc nhiều ngưỡng.
Thuộc tính phiên bản
IntersectionObserver.delayRead only Thử nghiệm-
Một số nguyên cho biết độ trễ tối thiểu giữa các thông báo từ trình quan sát này.
IntersectionObserver.rootRead only-
ElementhoặcDocumentcó ranh giới được dùng làm hộp giới hạn khi kiểm tra sự giao nhau. Nếu không có giá trịrootnào được truyền vào hàm khởi tạo hoặc giá trị lànull, thì viewport của tài liệu cấp cao nhất sẽ được sử dụng. IntersectionObserver.rootMarginRead only-
Một hình chữ nhật dịch chuyển được áp dụng vào bounding box của gốc khi tính toán sự giao nhau, giúp thu nhỏ hoặc mở rộng gốc cho mục đích tính toán. Giá trị được trả về bởi thuộc tính này có thể không giống với giá trị được chỉ định khi gọi hàm khởi tạo vì nó có thể được thay đổi để phù hợp với các yêu cầu nội bộ. Mỗi độ lệch có thể được biểu thị bằng pixel (
px) hoặc phần trăm (%). Giá trị mặc định là "0px 0px 0px 0px". IntersectionObserver.scrollMarginRead only-
Một hình chữ nhật dịch chuyển được áp dụng vào mỗi scroll container trên đường dẫn từ gốc giao nhau đến đích, giúp thu nhỏ hoặc mở rộng các hình chữ nhật cắt xén được dùng để tính toán sự giao nhau. Giá trị được trả về bởi thuộc tính này có thể không giống với giá trị được chỉ định khi gọi hàm khởi tạo.
IntersectionObserver.thresholdsRead only-
Danh sách các ngưỡng, được sắp xếp theo thứ tự số tăng dần, trong đó mỗi ngưỡng là tỷ lệ diện tích giao nhau so với diện tích hộp giới hạn của một đích được quan sát. Thông báo cho một đích sẽ được tạo ra khi bất kỳ ngưỡng nào bị vượt qua đối với đích đó. Nếu không có giá trị nào được truyền vào hàm khởi tạo, thì 0 sẽ được sử dụng.
IntersectionObserver.trackVisibilityRead only Thử nghiệm-
Một giá trị boolean cho biết liệu
IntersectionObservernày có đang kiểm tra xem đích có bị suy giảm khả năng hiển thị hay không.
Phương thức phiên bản
IntersectionObserver.disconnect()-
Dừng đối tượng
IntersectionObserverkhông quan sát bất kỳ đích nào. IntersectionObserver.observe()-
Yêu cầu
IntersectionObserverquan sát một phần tử đích. IntersectionObserver.takeRecords()-
Trả về một mảng các đối tượng
IntersectionObserverEntrycho tất cả các đích được quan sát. IntersectionObserver.unobserve()-
Yêu cầu
IntersectionObserverngừng quan sát một phần tử đích cụ thể.
Ví dụ
const intersectionObserver = new IntersectionObserver((entries) => {
// If intersectionRatio is 0, the target is out of view
// and we do not need to do anything.
if (entries[0].intersectionRatio <= 0) return;
loadItems(10);
console.log("Loaded new items");
});
// start observing
intersectionObserver.observe(document.querySelector(".scrollerFooter"));
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Intersection Observer # intersection-observer-interface |