Question

我试图找到元素在屏幕上的时间（尝试实现无限加载器）。

将观察者绑定到列表中的最后一项并聆听，不幸的是在chrome 62 mac 10.10中，即使我观察的元素不在视口中，回调也会触发。

当我检查交叉点时，我可以轻松地防止它。这是Intersection Observer的工作方式吗？

提前感谢您的帮助。

＆＃13;

---
output: pdf_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{r data}
set.seed(10)
x=rnorm(10)
y=rnorm(10)
```

First we plot y vs x with a scatterplot:

```{r scatterplot, eval=FALSE}
plot(x, y)
```

Then we regress y on x and add the least squares line to the plot:

```{r addline, eval=FALSE}
fit <- lm(y~x)
abline(fit)
```

```{r echo=FALSE}
plot(x,y)
fit <- lm(y~x)
abline(fit)
```

＆＃13;

bindIO();


function ioCallback(entries, observer) {
    console.log("entries");
    console.log(entries);
    entries.forEach(entry => {
        // Each entry describes an intersection change for one observed
        // target element:
        console.log(entry.boundingClientRect);
        console.log(entry.intersectionRatio);
        console.log(entry.intersectionRect);
        console.log(entry.isIntersecting);
        console.log(entry.rootBounds);
        console.log(entry.target);
        console.log(entry.time);
    });
}

function bindIO(arguments) {
    var options = {
        threshold: 1.0
    }

    observer = new IntersectionObserver(ioCallback, options);
}
var triggerel;
var lastIndex;
var items;
var observer;

setTimeout(function() {
    observeEl();
}, 2000);


function observeEl(arguments) {
    items = document.querySelectorAll('.item');
    lastIndex = items.length
    triggerel = items[lastIndex - 1];
    observer.observe(triggerel);

}

＆＃13;

Answer 1

事实上，你已经触及了一些看似违反直觉的东西。

当IntersectionObserver被实例化时，回调被运行一次以检测元素是否在视图中（如果它不在视图中，则正确地将isIntersecting属性报告为false）。

最简单的方法是在运行任何只在元素实际可见时启动的功能之前检查.isIntersecting。

希望这有助于确认您在检查这些事情时走在正确的道路上，但您没有犯过任何错误。

Intersection Observer API Fires回调甚至元素不在视图中

1 个答案: