html - 在intersectionObeserver API 中isVisible 属性是什么意思？

Question

在评论中私刑我之前，请听我说完。

当元素滚动到 View 中时，intersectionobserver 应该监听吗？

但是当我这样做时，isVisible 属性是错误的，无法弄清楚原因。我认为这是因为我不理解 isVisible 属性，因为其他属性正在工作。

这是我的代码:

import React, { useRef, useEffect, useState, useContext } from 'react'
import ReactGA from 'react-ga';
import Context from '../utils/context'


const Home = props => {
  const context = useContext(Context)
  const [scrollState, setScroll] = useState(false)
  const intersectTarget = useRef(null)

  useEffect(() => {
    // ReactGA.pageview(props.location.pathname);
    if(!context.initialLoadProp) {
      context.setInitialLoadProp(true)
    }
  }, [])

  useEffect(() => {
    const opts = {
            root: null,
            rootMargin: '0px',
            threshold: 0
    }
    const callback = entry => {
        console.log(entry)
    }
    const observerScroll = new IntersectionObserver(callback, opts)

    observerScroll.observe(intersectTarget.current)
  }, [])

  return(
    <div>
      <img height="500px"
           width="500px"
           src="https://timedotcom.files.wordpress.com/2019/03/kitten-report.jpg" alt=""/>
      <div id="heading1" style={{height: '500px'}}>
        <h1>First Heading</h1>
      </div>
      <div style={{height: "500px"}}>
        <h1 ref={intersectTarget}
            id="heading2">
          Second Heading
        </h1>
      </div>
    </div>
  )
};

export default Home;

我的输出甚至认为 isIntersecting 是真的 isVisible 是假的。

Answer 1

“isVisible”属性是提议的 Intersection Observer v2 更新的一部分，涉及目标元素对用户的实际可见性。将选项对象传递给观察者时，您可以包含一个“trackVisibility” bool 值来实现它，但也需要相应的“延迟”属性。此延迟的值以毫秒为单位，并且需要至少为 100。如果未提供适当的延迟，那么您将在控制台中收到一个错误，并且观察者将不会被启动。

在这一点上，我只知道 Chrome 支持此功能。到目前为止，我一直无法真正使可见性功能起作用，但延迟似乎起作用了。这是一个实验性功能的实验性功能。

Intersection Observer v2 article