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

Question

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

当元素滚动到视图中时，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”布尔值来实现它，但也需要相应的“延迟”属性。此延迟的值以毫秒为单位，并且需要至少为 100。如果未提供适当的延迟，那么您将在控制台中收到一个错误，并且观察者将不会被启动。

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

Intersection Observer v2 文章

Answer 2

要激活 IntersectionObserver v2 isVisible 功能，您必须添加以下两个选项：

const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0,

    /* required options*/
    trackVisibility: true,
    delay: 100              // minimum 100
}

能见度计算如下：

• 如果观察者的 trackVisibility 属性为 false，则目标被视为可见。这对应于当前的 v1 行为。
• 如果目标具有除 2D 平移或成比例的 2D 放大以外的有效变换矩阵，则该目标被认为是不可见的。
• 如果目标或其包含区块链中的任何元素的有效不透明度不为 1.0，则目标被视为不可见。
• 如果目标或其包含区块链中的任何元素应用了任何过滤器，则该目标被视为不可见。
• 如果实现不能保证目标完全不被其他页面内容遮挡，则目标被认为是不可见的。

在使用之前检查 IntersectionObserver v2 浏览器支持https://caniuse.com/#feat=intersectionobserver-v2

Answer 3

[注：我编写了 IntersectionObserver 的规范并在 Chrome 中实现了它]。

正如前面的答案所述，isVisible 仅在浏览器支持 IntersectionObserver V2 时才有意义（目前仅支持基于 chromium 的浏览器，包括 Chrome 和 Edge）；如果在构造观察者时包含“trackVisibility”和“delay”参数。

这不被认为是 Chrome 中的实验性功能；它是一个完整、稳定的功能，被大型生产网站使用。不过，目前尚不清楚其他浏览器何时支持它。有关支持此功能的浏览器的最新信息如下：

https://chromestatus.com/features/5878481493688320

如果您认为该功能可以改进，请考虑在规范存储库中提交问题：

https://github.com/w3c/IntersectionObserver/issues

Answer 4

根据https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry据我所知，没有 isVisible 属性。

如果您的目标是检查元素何时完全处于视图中，则可以将阈值更改为threshold: 1，然后检查 是否intersectionRatio等于 1 entry.intersectionRatio == 1。

我可能在某个地方错过了 isVisible 但我找不到它。

希望这可以帮助！