标签: intersection-observer

IntersectionObserver是一个相当新的实验性API，目前尚不受所有浏览器的完全支持。

它将有很多用途，但目前最主要的用途是延迟加载图像，也就是说，如果您在网站上拥有大量图像。它是由谷歌建议，如果你审计你的网站灯塔。

现在，网络上有几条代码片段提示了其用法，但我认为没有一个经过100％审查。例如，我正在尝试使用这个。它在Chrome，Firefox和Opera上像超级按钮一样工作，但在IE和Edge上不起作用。

const images = document.querySelectorAll('img[data-src]');
const config = {
  rootMargin: '50px 0px',
  threshold: 0.01
};

let observer;

if ('IntersectionObserver' in window) {
  observer = new IntersectionObserver(onChange, config);
  images.forEach(img => observer.observe(img));
} else {
  console.log('%cIntersection Observers not supported', 'color: red');
  images.forEach(image => loadImage(image));
}

const loadImage = image => {
  image.classList.add('fade-in');
  image.src = image.dataset.src;
}

function onChange(changes, observer) {
  changes.forEach(change => {
    if (change.intersectionRatio > 0) {
      // …

我正在尝试为无限滚动列表设置 IntersectionObserver。我想检查 IntersectionObserver 是否已到达列表的最后一项。

到目前为止，我的IntersectionObserver设置如下所示：

mounted() {
    const config = {
        treshold: 1
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.intersectionRatio > 0) console.log(entry.target);
        });
    }, config);

    observer.observe(this.lastRenderedDeal());
}

我的列表项呈现如下：

<deal :deal="deal"
      :key="index"
      ref="deals"
      v-for="(deal, index) in deals"
</deal>

要获取最后一次渲染ref的交易，我在交易中使用了：

lastRenderedDeal() {
    const deals = this.$refs.deals;
    return deals ? deals[deals.length - 1].$el : null;
}

这适用于初始设置并触发。问题是，当我想要无限滚动时，我需要不断附加到交易列表中。因此，我lastRenderedDeal不断更新以反映附加到我的列表中的最后一笔交易。

这种反应性observer.observe似乎没有传递给方法。它只选取我的初始元素。这似乎很明显，因为它已在mounted钩子中实例化，但我该如何处理呢？

我是否需要为交易设置观察者并再次调用observer.observe？如果是这样，我可以简单地告诉它替换最初观察到的项目吗？

我的页面上有一个部分,当用户滚动时,会触发一个事件.该解决方案的使用IntersectionObserver非常适合我的需求.但是,rootMargin当用途已经存在时,我想调整这个观察者的大小.

现在这是一个像这样的观察者最简单的方法:

const options = { rootMargin: '20px' };
let observer = new IntersectionObserver(callback, options);

将分配它的属性:

observer.rootMargin = '0px';

但是似乎没有用.

有可能以及如何改变曾经创建过的交叉观察者的行为？

我正在观察消息并使用消息时间戳跟踪这些观察结果。这些观察有一个重要条件：如果页面上没有客户端活动（光标不移动，或者他没有输入任何内容），则跟踪时间戳不应更新。客户经常收到一条新消息，但没有任何活动。这意味着一旦完全观察到该元素，Observer 就会跳过该元素。但是当用户实际提供一些活动时，不会重新观察该元素，这意味着除非比率发生变化，否则永远不会再次调用观察者回调。我如何告诉 IS 重新计算所有观察以触发我的回调？

手动“重新观察”元素的问题在于，如果元素已经在交叉边界内，则永远不会调用回调。

一些伪代码例如：

IS.callback = function(entries, observer){
    for (var entry in entries)
    {
        if (activity && entries.hasOwnProperty(entry))
        {
            if (lastTimestamp < entries[entry].data.timestamp)
                lastTimestamp = entries[entry].data.timestamp;
        }
    }
};

我有一个带有 4 个孩子的 flexbox 容器，每个孩子都有with:50%.

我想为每个孩子创建一个 IO（Intersection Observer），但由于某种原因，它只适用于 1º 和 3º 元素......但是如果我为 2º 和 4º 元素创建一个新的 IO，它就可以工作。

我究竟做错了什么？

这是演示：https : //codepen.io/sandrina-p/pen/mddzpzW

我正在开发一个 React 项目，并尝试在 div 出现在视图中时对其进行动画处理和显示。我使用“react-intersection-observer”中的 useInView 挂钩来确定 div 是否在视图中，然后启动动画以使 div 可见。

但是，当我在同一个组件中有两个 div 时，即当第一个 div 出现在视图中时，这将无法正常工作 - 动画并显示第一个 div，并且当第二个 div 出现后进一步滚动时视图 - 动画并显示第二个 div。

任何帮助，将不胜感激。

这是代码：

import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';

function Container(props) {

    const { ref, inView } = useInView({
        threshold: 1
    });

    const { ref1, inView1 } = useInView({
        threshold: 1
    });

    return (
        <div>
            <motion.div ref={ref}>
                <motion.h1 
                   initial={{  x: -700, opacity: 0 }} 
                   animate={ inView ? { x: 0,  opacity: …

我有一个div，当它滚动到视口时，我想更改颜色，而我正在尝试使用新的junctionObserver方法实现这一点。我已经在config回调中设置了参数，但是似乎无法让观察者自己添加类来更改背景颜色？

任何帮助都将是惊人的。

codepen：https：//codepen.io/emilychews/pen/mXVBVK

const config = {
  root: null, 	// sets the framing element to the viewport
  rootMargin: '0px',
  threshold: 0.5
};

const box = document.getElementById('box');

let observer = new IntersectionObserver(function(entries) {
  observer.observe(box);
  entries.forEach(function(item){
    item.classList.add("active");
  });
}, config);

body {
  margin: 0; padding: 0;
  display:flex;
  justify-content: center;
  align-items: center;
  height: 300vh;
}

#box {
  width: 100px; 
  height: 100px;
  background: blue;}

.active {background: red;}

<div id="box"></div>