Question

我正在使用事件监听器进行滚动，这将根据用户在页面上的位置将页面上的position:fixed更改为position:relative。我有一个非常简单的设置，我正在使用react，当react组件安装时，我为scroll事件添加一个带有throttler的监听器。这在桌面上工作得很好，但是在移动设备上，我注意到在滚动完成之前，更改元素上的定位的事件不会触发。

这是我的设置 -

在组件装载上，添加侦听器：

 componentDidMount() {
    window.addEventListener('scroll', this.scrollThrottler);
  }

调用限制功能：

  let scrollTimeout;
  scrollThrottler() {
    // pass through throttle designated at 15 fps
    if ( !scrollTimeout ) {
      scrollTimeout = setTimeout(() => {
        scrollTimeout = null;
        this.handleScroll();
      }, 66);
    }
  }

然后它调用的函数只检查DOM上正确点的某个div是否改变了它的类，如下所示：

 handleScroll() {
    const width = this.state.windowWidth ? this.state.windowWidth : window.innerWidth;
    const stickyBoundary = this.refs.approved.getBoundingClientRect().top + this.refs.approved.offsetHeight + this.refs.stickyBar.offsetHeight - window.innerHeight;

    if ( (width <= 991) && (stickyBoundary > 0)) {
      this.refs.rootNode.className = 'row primary-product-block sticky-add-btn';
    } else {
      this.refs.rootNode.className = 'row primary-product-block';
    }

}

所以这在桌面上运行得很好，但是在移动设备上看起来它不会在滚动事件完成之后直到固定或相对位置。无论如何要解决这个问题吗？谢谢！

Answer 1

将touchmove事件添加到您的代码中

componentDidMount() {
   window.addEventListener('scroll', this.scrollThrottler);
   window.addEventListener('touchmove', this.scrollThrottler);
}

Javascript，滚动事件监听器在移动设备上滚动之前不会触发

1 个答案: