Question

我正在尝试在我的React应用中使用IntersectionObserver。我想用它实现延迟加载。因此，我观察了几个元素，如果它们出现在屏幕上，则会在其中加载内容。

这是一个非常简化的代码：

class Table extends React.Component {  
    constructor() {
    super()
    this.state = {
      entries: 0
    }
  }

  componentWillUnmount() {
    console.log('componentWillUnmount')
    if (this.observer) this.observer.disconnect()
  }


    observe (c) {
    if (!this.observer) {
      this.observer = new IntersectionObserver(
        entries => {
            this.setState({entries: entries.length})
        },
        { threshold: [0, 0.25, 0.5, 0.75, 1] }
      )
    }
    if (!c) return
    this.observer.observe(c)
  }

  render() {
    const {entries} = this.state
    return (
      <div>
        <h1>Number of observer entries: {entries}</h1>
        <div
          ref={this.observe.bind(this)}
          style={{height: '1000px', display: 'block', width: '500px'}}
        />
        <div
          ref={this.observe.bind(this)}
          style={{height: '1000px', display: 'block', width: '500px'}}
        />
      </div>
    )
  }
}

ReactDOM.render(<Table />, document.querySelector("#app"))

在安装组件时，它显示观察到两个元素，但是当我向下滚动时，它仅更改为一个元素。我不知道我在想什么。

JSON小提琴-https://jsfiddle.net/w1zn49q6/12/

Answer 1

div垂直堆叠。在最初的渲染中，由于它们的布局，当两个视图一起进入视口时（第一个div进入，第二个div退出），相交观察器被触发。但是，一旦渲染它们，它们将在垂直滚动的正常过程中一次进入/退出一个，因此条目将永远只包含一个div，并且最近一次与x轴相交。

相交项仅报告从0到1（完全在视图中）到/从0（不在视图中）的过渡。因此，当一个div完全退出/进入视图后，该条目将不再出现在条目更新中。

但是您仍然可以获得2个条目：）。如果您设法快速滚动！使用加速的鼠标滚轮尝试一下。因此，基本上，在两次相交计算之间，如果两个div都移得太远，则两者都会引发相交事件，但是如果它们缓慢移动，则相交将是渐进的，因为它们是一一堆叠的。

如果将它们堆叠在同一行中，您将连续获得两个条目，因为两者将同时与x轴相交。

交叉口观察员丢失条目

1 个答案: