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

Question

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

<div>

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>
    );
  }
}

div 是一个很高的

.visible-box

，有点被 

div

 剪掉了。我想你明白我的逻辑了。

现在，这在桌面上完美运行，但

不适用于移动设备

。根据我的研究，我发现

.content-box 事件不会在移动设备上触发。我还阅读了有关 mousewheel

 事件的信息，但它只给出了触摸的 (x,y) 坐标，而不是像 

touchmove

 那样的 

deltaY

。
我如何在移动设备上实现此功能？

我遇到了一个同样的问题，我使用

Answer 1

来处理滚动，并使用 DeltaY 来处理用户向上或向下滚动。此活动不适用于手机。因此，您可以使用

onWheel

 并将一些 

clientY

 值存储在数组中来检查用户是否向上或向下滚动。

onTouchMove