IntersectionObserverEntry: thuộc tính intersectionRatio
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.
Thuộc tính chỉ đọc intersectionRatio của giao diện IntersectionObserverEntry cho biết phần nào của phần tử đích hiện đang hiển thị trong tỷ lệ giao nhau của root, dưới dạng giá trị từ 0.0 đến 1.0.
Giá trị
Một số từ 0.0 đến 1.0 cho biết phần tử đích đang thực sự hiển thị trong hình chữ nhật giao nhau của root bao nhiêu.
Chính xác hơn, giá trị này là tỷ lệ giữa diện tích của hình chữ nhật giao nhau (intersectionRect) với diện tích hình chữ nhật biên của target (boundingClientRect).
Nếu diện tích hình chữ nhật biên của target bằng 0, giá trị trả về là 1 nếu isIntersecting là true, hoặc 0 nếu không.
Ví dụ
Trong ví dụ đơn giản này, một callback giao nhau đặt opacity của mỗi phần tử đích bằng với tỷ lệ giao nhau của phần tử đó với root.
function intersectionCallback(entries) {
entries.forEach((entry) => {
entry.target.style.opacity = entry.intersectionRatio;
});
}
Để xem ví dụ cụ thể hơn, hãy xem Handling intersection changes.
Thông số kỹ thuật
| Specification |
|---|
| Intersection Observer # dom-intersectionobserverentry-intersectionratio |