javascript - 需要观察滚动条

Question

我正在构建一个包含大量动画的登陆页面。当我需要对某些内容进行动画处理时，我会为滚动创建一个事件监听器并附加 onScroll 函数，该函数通过设置状态来触发我的动画。

我目前创建了不到 10 个监听器，其中包含 10 个函数来检查状态。

我想创建一个使用 1 个事件监听器的实体，然后我的所有着陆页组件都应该订阅并获取位置。

我该怎么做？我正在使用 ES6 和 React。

我的一些代码:

  componentDidMount() {
    this.toggleAppBar();
    addScrollEventListener(this.handleOnTopScroll);
    addScrollEventListener(this.handleFirstScroll);
  }

  handleOnTopScroll = () => {
    let scrollTop = document.body.scrollTop
    if (scrollTop === 0) {
      this.toggleAppBar();
    }
  }

  handleFirstScroll = () => {
    let scrollTop = document.body.scrollTop
    //console.log(scroll);
    if (!scroll) {
      this.toggleAppBar();
      scroll = true
      return
    }
    if (scrollTop === 0) {
      scroll = false
    }
  }

解决方案按要求工作，但我需要为其他组件添加更多监听器

Answer 1

我们在公司网站上做了类似的事情，在滚动上有一些复杂的动画。我们提出的解决方案是标准化父组件上的滚动，以便 0 滚动 = 0 且完全滚动等于 1。我们将“animationProgress”传递给子组件，它可以确定如何以及何时进行动画处理。

为此，我们使用以下内容:

calculateAnimationProgress (target) {
  return mapRange(target.scrollTop, 0, target.scrollHeight - window.innerHeight, 0, 1);
}

//Utility function to map a value to it's corelated value within a given range
const mapRange = (value, inMin, inMax, outMin, outMax) => (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;

这为我们提供了从 0 到 1 的标准化滚动，因此，如果高度发生变化，您将始终拥有一个已知范围，尽管您可能需要重新计算窗口大小调整等。

在您的子组件中，您可以通过仅允许它们在给定的“animationProgress”范围内重新渲染来调整性能。

shouldComponentUpdate (nextProps) {
  return isInRange(nextProps.animationProgress, 0, 1);
}

//Utility function returns boolean if value within a given range
const isInRange = (val, min, max) => {
  return val >= min && val <= max;
}

我希望这会有所帮助。您可以通过此方法查看我们的结果 http://redshiftdigital.com