Question

所以我有一个包含几个部分的React网站。我想将某些道具传递给这些部分，但仅当它们在视口中时才可以。为此，我包括了一个滚动事件监听器，该监听器应该更改“活动”部分每次window.scrollY越过活动节的边界（通过将其留在（window.scrollY > section.getBoundingClientRect().bottom之后），或者返回到页面的开头（window.scrollY < section.getBoundingClientRect().top - window.innerHeight）。

问题是，它似乎不起作用。

这是演示：https://codepen.io/LuisChDev/pen/REVPWd?editors=0112

关于为什么代码不起作用的任何想法？

Answer 1

您的边界对象的顶部和底部属性为undefined。

document.getElementById(x).getBoundingClientRect.top

将其更改为

document.getElementById(x).getBoundingClientRect().top

Answer 2

问题在于您设置滚动侦听器的方式：

const {curSec} = this.state;
window.addEventListener("scroll", () => {
  if (window.scrollY > boundaries[curSec].bottom - 80) {
  ...

此时，curSec为0。cursec不会在滚动处理程序内自动更新，因此，您只为第一个div设置了边界。

您应该将其更改为以下内容：

window.addEventListener("scroll", () => {
  boundaries.forEach((boundary, i) => {
    if (window.scrollY > boundary.top) {
      this.setState({ curSec: i });
    }
    else if (window.scrollY > boundary.bottom + 20) {
      this.setState({ curSec: i - 1 });
    }
  });
});

codepen

您的边界检查也不起作用，因此我对其进行了一些调整。这样，滚动侦听器实际上检查所有div的边界，而不仅仅是第一个。

但是，您应该研究Intersection Observer，因为它可以做到这一点，但性能更高。

另外，您要注意的一点是：不要一直更新共享给stackoverflow的codepen －您应该将代码粘贴到问题中并链接到新的codepen fork。

反应-滚动时组件无法正确更新

2 个答案: