Question

我有一个（React）组件，其中包含从数组映射的许多<div>个文本。容器的高度很小，我使用Javascript来实现滚动。这是代码：

class MyComponent extends Component {
  constructor() {
    this.state = {
      visibleTop: 0
    };
  }

  scrollHandler(ev) {
    ev.preventDefault();
    const { deltaY } = ev;
    const { visibleTop } = this.state;
    const { clientHeight: height } = this.visibleBox;

    if ( visibleTop >= 10 && deltaY < 0 ) {
      return;
    }

    if ( visibleTop <= (300 - height) && deltaY > 0 ) {
      return;
    }

    this.setState(prevState => ({
      visibleTop: prevState.visibleTop - deltaY
    }));
  }

  render() {
    const {
      state: { visibleTop },
      scrollHandler
    } = this;

    return (
      <div className='content-box' onWheel={scrollHandler}>
        <div className='visible-box'
          style={{ top: visibleTop }}
          ref={el => this.visibleBox = el}>
          {
            logs.map((log, index) => (
              <div className='log-line' key={`${log}-${index}`}>{log}</div>
            ))
          }
        </div>
      </div>
    );
  }
}

.visible-box div是一个高div，由.content-box剪裁。我认为你得到了我的逻辑。

现在，这在桌面设备上非常完美，但无法在移动设备上运行。根据我的研究，我发现mousewheel事件不会在移动设备上触发。我还阅读了touchmove事件，但它只提供触摸的（x，y）坐标，而不是deltaY mousewheel。如何在移动设备上实现此功能？

让onWheel事件在移动设备上运行

0 个答案: