标签: intersection-observer

在任何人在这里付出太多努力之前，我已经有了一个讨厌的解决方法。我只是想知道是否有人可以使用它。

Edge 15 版现已发布，并支持交叉观察器（用于延迟加载）。

我已经实现了它，它在支持它的所有浏览器中都可以正常工作（Chrome 和 Opera。Firefox 和 Safari 尚未实现），但在 Edge 中根本没有。

没有抛出错误，但从未调用回调。

handleIntersectionElement(elm) {
  if (elm && this.state.enabled && !this.observer) {
    this.observer = new global.IntersectionObserver(this.intersectionCallback, this.options);
    this.observer.observe(elm);
  }
}

选项如下，没什么特别的：

options = { root: null, rootMargin: '100px', threshold: [0] };

这是 React 组件的一部分，但不明白为什么这会有所作为。

我尝试在我的 Angular 7 应用程序中使用 Intersection Observable 延迟加载图像。我从 ngAfterViewInit 生命周期钩子中调用了 Intersection Observable。但是当我加载应用程序时，回调被调用两次，一次所有 isIntersecting 值都为 true，下一次调用正确的 isIntersecting 值。我对这种行为感到困惑。

ngAfterViewInit() {
const imgOne = document.querySelectorAll('[data-class]');

    const options = {
      // root: document
      // threshold: 0
    };

    const observer = new IntersectionObserver((entries, observer) => {
      console.log(entries.length);
      entries.forEach((entry) => {
        // console.log(entry);
        if (!entry.isIntersecting) {
          return;
        } else {
          const el = entry.target;
          if (el.id === ('test' + this.testCount)) {
            console.log(entry);
          }
          // observer.unobserve(entry.target);
        }
      });
    });

    imgOne.forEach((eachQuery) => {
      observer.observe(eachQuery);
    });
 }

https://stackblitz.com/edit/angular-wqbuyr

更新：现在交叉观察器被完美调用，但现在出现了问题。由于我们使用 …

我正在尝试使用 React/Hooks 和 Intersection Observer API 跟踪元素可见性。但是，我不知道如何使用“useEffect”设置观察。有谁知道我该怎么做？我的解决方案不起作用...

function MainProvider({ children }) {
  const [targetToObserve, setTargetToObserve] = useState([]);

  window.addEventListener("load", () => {
    const findTarget = document.querySelector("#thirdItem");
    setTargetToObserve([findTarget]);
  });

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.intersectionRatio === 0.1) {
          console.log("It works!");
        }
      },
      {
        root: null,
        rootMargin: "0px",
        threshold: 0.1
      }
    );
    if (targetToObserve.current) {
      observer.observe(targetToObserve.current);
    }
  }, []);

  return (
    <main>
     <div className="Section-item" id="firstItem"></div>
     <div className="Section-item" id="secondItem"></div>
     <div className="Section-item" id="thirdItem"></div>
    </main>
  );
}

我目前正在使用相交观察器来检测元素何时离开视口。它是这样设置的：

const el = document.querySelector('#el')
const observer = new window.IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    console.log('LEAVE')
    return
  }
  console.log('ENTER')
}, {
  root: null,
  threshold: 0,
})

observer.observe(el)

但我也想知道元素是在视口上方还是下方。有没有办法实现这一目标？

在我的 component.test.js 中，我尝试通过执行以下操作来模拟 IntersectionObserver：

const mock = ()=>({
    observe: jest.fn(),
    disconnect: jest.fn()
});
window.IntersectionObserver = jest.fn().mockImplementation(mock);


describe("Component", ()=>{
    it("test 1", ()=>{
        render(<Component/>);
        ...
    }
});

我的 component.js 看起来像这样（它执行无限分页操作）：

//ref to last item loaded >> load more items once it enters view
const observer = useRef();
const lastEntryRef = useCallback((node)=>{
        ...
        observer.current.disconnect(); //ERROR LINE
    }
    ...
);

然而，当我运行测试时，我得到TypeError: observer.current.disconnect is not a function；如果它运行的话也是如此observer.current.observe()。我尝试在 component.test.js 本身的 it() 块内测试它，方法是实例化 IntersectionObserver，然后调用这些方法，当我重新运行测试时，会显示相同的消息，因此错误看起来与 IntersectionObserver 的设置方式无关在组件.js 中。我没有正确嘲笑 IntersectionObserver 吗？如果是这样，我该如何修复它？

如果我将该threshold值配置为大于0的任何值，则isIntersecting在目标离开视口时永远不会返回false。但是，如果我将默认阈值保留为0，isIntersecting则在目标退出视口时将返回false。请参阅下面的示例并删除threshold: 1.0。

https://jsfiddle.net/snewcomer24/get0a4xr/1/

这似乎是不同的行为。有人对此行为有解释吗？

我正在尝试观察隐藏的元素。我有一个样式设置为 的元素display: none。我希望当我的元素相交时，它将执行我的操作，即：播放视频。我在下面分享我的示例代码

 var options = {threshold: 0.5 }     

 var circle = document.getElementById('content_video');

 var observer = new IntersectionObserver(entries => {
     var [{ isIntersecting }] = entries
     if (isIntersecting) {
         player.play();
         player.ima.getAdsManager().resume();
     } else {
         player.ima.getAdsManager().pause();
     }
 }, options);

 window.addEventListener('load', () => {
     if ('IntersectionObserver' in window) observer.observe(circle);
 }, false);

滚动 react-native 后，如何检查元素是否可见？看到了一些反应的例子，但我专门寻找反应原生。想要跟踪展示次数和点击次数

我有一堆 SVG 路径，它们是文本字母。在滚动时，我想offset-path从原始位置开始为它们设置动画。因此，我为属性0x指定0y起始位置offset-path，然后随机指定Line我offset-path想要为 SVG 字母设置动画的位置，如下所示：

path.setAttribute("style", "offset-path: path('M" + 0 +" " + 0 + " L " + generateRandomAnimationPathLine() + " " + generateRandomAnimationPathLine() + "')"); 

但是，一旦我为所有 SVG 路径提供offset-path随机L属性，它们就已经遍布屏幕并offset-distance设置为0%。这是为什么？offset-distance如果设置为 0，它们不应该留在原点吗？为什么即使设置为 0，SVG 也会从原点移动L？offset-path: path()M

您可以检查每个 SVG 字母并检查offset-distance它们是否已经离开原点。如何从原始位置开始为 SVG 路径设置动画？我试图实现一种效果，当您滚动时，它会慢慢破坏“Hello，World”，当您向上滚动时，它会恢复到原始形式。

图片解释了我想要实现的目标。当 SVG 在屏幕上时，设置offset-path为随机Lines/L，我想通过相对于滚动offset-distance从变为0%来从原始位置对 SVG 字母进行动画处理，如下所示： …

我有一个粘性标题，用于IntersectionObserver在卡住时获得一个类，然后隐藏一些元素并减小徽标的大小。当然，当标题的高度缩小时，滚动高度也会缩小，因此，如果您向下滚动到足以缩小标题，它就会缩小，然后意识到它不再卡住，因此会增长，但这会导致它再次缩小，所以它会增长，如此无限循环。这似乎在 Chrome 中最令人震惊，但我在 Firefox 中也看到过这种情况（尽管 Firefox 似乎能够识别发生了什么并自行解决）。

我已经尝试了很多事情，包括在setTimeout()类被删除时延迟，margin-bottom在缩小时添加与标题等效的内容，显示带有height缩小空间的隐藏元素，但似乎没有什么可以解决这个问题。

我知道我以前也在其他网站上看到过这种情况，我怀疑这只是缩小标题的系统性问题，但我能做些什么来防止这种情况发生吗？我没主意了。

const OBSERVER = new IntersectionObserver(
    ([e]) => e.target.classList.toggle("js-is-sticky", e.intersectionRatio < 1),
    {
        rootMargin: document.getElementById("wpadminbar") ? "-32px 0px 0px 0px" : "0px 0px 0px 0px",
        threshold: [1],
    }
);

OBSERVER.observe(document.querySelector(".sticky-block"));

CSS 和标记有点复杂（并且稍微不相关），因此如果需要，请参阅我们的演示网站。https://gepl.myweblinx.net/

如果需要其他任何内容，我很乐意添加。

编辑1：我看到这个答案建议在保留正确高度的元素周围放置一个容器，但这不起作用，position: sticky;因为position: sticky;仅适用于最近的容器（除非有人知道如何解决这个问题？）

编辑2：我对第一次编辑的答案想得太多了