IntersectionObserverEntry: hàm tạo IntersectionObserverEntry()

Cú pháp

new IntersectionObserverEntry(intersectionObserverEntryInit)

Tham số

intersectionObserverEntryInit

Một đối tượng có các thuộc tính sau, tất cả đều bắt buộc:

boundingClientRect

Đối tượng chỉ định vị trí và kích thước của hình chữ nhật biên của phần tử đích, với các thuộc tính x, y, width, và height. Đây là hình chữ nhật do Element.getBoundingClientRect() trả về.

intersectionRatio

Một số biểu thị tỷ lệ diện tích intersectionRect so với diện tích boundingClientRect. Nếu diện tích boundingClientRect bằng 0, giá trị này là 1 khi isIntersecting là true, và 0 nếu không.

intersectionRect

Đối tượng chỉ định vị trí và kích thước vùng hiển thị của target trong hình chữ nhật giao nhau của root, với các thuộc tính x, y, width, và height.

isIntersecting

Giá trị boolean là true nếu phần tử đích giao nhau với root của intersection observer, hoặc false nếu không.

isVisible

Giá trị boolean là true nếu phần tử đích được xác định là hiển thị đầy đủ và không bị che khuất, không có hiệu ứng hình ảnh nào làm thay đổi cách nó hiển thị trên màn hình. false nghĩa là target có khả năng hiển thị bị ảnh hưởng, hoặc không thể xác định điều đó.

rootBounds

Đối tượng chỉ định vị trí và kích thước của hình chữ nhật giao nhau của root, với các thuộc tính x, y, width, và height, hoặc null.

target

Element mà phần giao nhau với root đã thay đổi.

time

Một DOMHighResTimeStamp cho biết thời điểm thay đổi giao nhau được ghi nhận, tính tương đối với time origin của IntersectionObserver.

Giá trị trả về

Một đối tượng IntersectionObserverEntry mới với các thuộc tính được khởi tạo theo giá trị trong intersectionObserverEntryInit.

Ví dụ

Tạo IntersectionObserverEntry

Ví dụ này tạo một IntersectionObserverEntry cơ bản mô tả một phần tử hiển thị hoàn toàn. Trong thực tế, các đối tượng này do trình duyệt tạo và chuyển vào callback IntersectionObserver tự động.

const entry = new IntersectionObserverEntry({
  time: performance.now(),
  rootBounds: { x: 0, y: 0, width: 1024, height: 768 },
  boundingClientRect: { x: 10, y: 20, width: 200, height: 100 },
  intersectionRect: { x: 10, y: 20, width: 200, height: 100 },
  isIntersecting: true,
  isVisible: false,
  intersectionRatio: 1.0,
  target: document.body,
});

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• IntersectionObserverEntry
• IntersectionObserver
• Intersection Observer API