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

使用普通JS，您可以使用element.onscroll事件来侦听特定元素上的滚动事件。

如果jQuery可用，您可以考虑使用jQuery的scroll()事件。

Answer 2

我们在公司网站上做了类似的事情，在滚动上有一些复杂的动画。我们提出的解决方案是规范化父组件上的滚动，以便0滚动= 0并且完全滚动将等于1.我们传递了＆＃34; animationProgress＆＃34;可以确定如何以及何时制作动画的子组件。

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

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的标准化滚动，因此如果高度发生变化，您将始终具有已知范围，但您可能需要在窗口调整大小等时重新计算。

在您的子组件中，您可以调整性能，只允许它们在您的＆＃34; animationProgress＆＃34;的给定范围内重新渲染。

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

查看此方法的结果

需要观察滚动

2 个答案: