使用 Intersection Observer 在 Reactjs 中从头开始无限滚动

Question

背景：我使用交叉点观察器构建了一个无限滚动器，目的是重用 dom 节点（也称为窗口）。当 div 滚动离开视口的顶部时，它会绝对定位到 div 序列的末尾，反之亦然，对于退出底部的 div。

问题：如果您向上滚动太快，您会完全滚动到 div 之外。同时，如果您向下滚动太快，则不会发生这种情况。很难弄清楚原因。

Codesandbox（原创）：https://codesandbox.io/s/cranky-pasteur-wckzm
Codesandbox（更新）：https://codesandbox.io/s/infinite-scroll-intersection-observer-p15bm

代码（更新）：

/* eslint no-unused-vars: 0 */
/* eslint react-hooks/exhaustive-deps: 0 */
/* eslint no-sequences: 0 */

import React, { useState, useEffect } from "react";
import "./styles.css";

const App = () => {
  useEffect(() => {
    const divs = document.querySelectorAll('.abc')

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

    let observer
    if (observer) observer.disconnect()
    observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting || window.pageYOffset === 0) return

        entry.target.onclick = function(){console.log(entry)}
        const firstDiv = entry.target.parentNode.firstElementChild
        const lastDiv = entry.target.parentNode.lastElementChild
        const lastDivTopAmount = Number(lastDiv.style.top.split('').slice(0, -2).join(''))
        const firstDivTopAmount = Number(firstDiv.style.top.split('').slice(0, -2).join(''))

        if (entry.boundingClientRect.top < 0) {
          console.log('element intersected top')
          firstDiv.style.top = `${lastDivTopAmount+320}px`
          firstDiv.parentNode.appendChild(firstDiv)
        }

        else {
          console.log('element intersected bottom')
          lastDiv.style.top = `${firstDivTopAmount-320}px`
          lastDiv.parentNode.prepend(lastDiv)
        }
      })
    }, options)

    divs.forEach(div => {
      observer.observe(div)
    })
}, [])

  return (
    <div>
      <div className="visibleRows">
        <div 
          style={{top: '0px', backgroundColor: 'blue', height: '320px', width: '580px', outline: '4px solid pink'}}
          className="baby-div-1 abc"
        />
        <div
          style={{top: '320px', backgroundColor: 'red', height: '320px', width: '580px', outline: '4px solid pink'}}
          className="baby-div-2 abc"
        />
        <div
          style={{top: '640px', backgroundColor: 'green', height: '320px', width: '580px', outline: '4px solid pink'}}
          className="baby-div-3 abc"
        />
        <div
          style={{top: '960px', backgroundColor: 'purple', height: '320px', width: '580px', outline: '4px solid pink'}}
          className="baby-div-4 abc"
        />
        <div
          style={{top: '1280px', backgroundColor: 'yellow', height: '320px', width: '580px', outline: '4px solid pink'}}
          className="baby-div-5 abc"
        />
        <div 
          style={{top: '1600px', backgroundColor: 'pink', height: '320px', width: '580px', outline: '4px solid pink'}}
          className="baby-div-6 abc"
        />
        <div 
          style={{top: '1920px', backgroundColor: 'orange', height: '320px', width: '580px', outline: '4px solid pink'}}
          className="baby-div-7 abc"
        />
        <div 
          style={{top:'2240px', backgroundColor: 'cyan', height: '320px', width: '580px', outline: '4px solid pink'}}
          className="baby-div-8 abc"
        />
      </div>
  </div>
  );
};

export default App;

样式.css

.abc {
  position: absolute;
  height: 320px;
  width: 580px;
  outline: 4px solid pink;
}

Answer 1

IntersectionObserver 回调仅在观察到的条目穿过 threshold 时触发。由于您在选项中定义的threshold 是0（并且您的根是null），这意味着只有当您的一个框移动穿过threshold（也就是当一个框进入或退出视口）。

令人困惑的部分是entries.forEach(...) 不会遍历所有观察到的目标，它只会获取超过阈值的实体。

因此，您的第一个条件 if (entry.boundingClientRect.top < 0 && window.pageYOffset > 320) { ... } 有效，因为当您的框从视口顶部滚动时可以实现这些条件。但是，您的第二个条件 if (entry.boundingClientRect.bottom > 1250 && window.pageYOffset > 320) { ... } 中的条件可能永远不会满足，因为您的视口需要为 931 高 bottom > 1250 (931 + 320 > 1250)。

我不太确定如何让您的方法与 IntersectionObserver 一起使用，因为您无法保证在需要时会超过阈值。如果顶框以负数 top 开头，并且您只是跟踪“视口顶部”阈值，这会有点工作......但它可能会因快速滚动而出现问题。

这对于scroll event listener 来说可能是一个更好的工作...或者使用交叉点观察器在到达页面底部后复制所有 div，而不是实际移动它们。

更新

尝试进一步澄清：第二个条件将“可能永远不会满足”，因为在任何短于931px 的屏幕上，当它“离开视口”时不会有boundingClientRect.bottom > 1250。在下图中，即使底部的灰色框满足该条件，当蓝色框超过0 阈值时，它也不会作为entity 传递。

现在，即使您确实有足够高的视口（或调整了数字以匹配 window.innerHeight），它仍然不起作用，因为如果您向上滚动刚好足以将蓝色框移到底部 - 当向下滚动时，不会有任何框越过您的阈值，因此不会触发回调，也不会出现蓝色的回调。