Question

我正在尝试将滚动导航添加到 React 和 GatsbyJS 中的演示文稿样式登录页面。

问题在于，我无法在fixed高度放置100%的每个页面（幻灯片），并且不会发生滚动。

从下面的代码中可以看到，keydown侦听器使用向下箭头导航，但是如何通过鼠标滚轮，滚动，触摸板或向下滑动来实现相同的操作？

class Index extends Component {
  NEXT = 40;

  swipeUp = () => {
    this.navigate({ keyCode: this.NEXT });
  };

  navigate = ({ keyCode }) => {
    if (keyCode === this.NEXT) {
      navigate(ROUTES.SLIDE2);
    }
    return false;
  };

  componentDidMount() {
    if (typeof window !== 'undefined') {
      window.addEventListener('keydown', this.navigate);
    }
  }

  componentWillUnmount() {
    if (typeof window !== 'undefined') {
      window.removeEventListener('keydown', this.navigate);
    }
  }

  render() {
    return (
      <PageContent>
        <PageContainer />
      </PageContent>
    );
  }
}

export default Index;

Answer 1

TL; DR https://codepen.io/devanshj/pen/RvmMpM

对于滚轮部分，您正确地说不会触发scroll事件（因为在页面position: fixed中没有内容溢出）。但是wheel事件无论如何都会触发。然后，我们可以使用wheel事件中的wheelDelta来获取滚动方向。
对于滑动部分，如果我们滚动某些内容并且用户滑动会触发scroll事件，则本来可以解决问题。但是事实并非如此。在我们的情况下，我们必须从touchstart，touchmove和touchend之类的事件中找出滑动事件。有一个名为hammer.js的7kb库，可以完成所有这些工作，我们可以简单地监听诸如swipeup之类的事件。
您没有提供适当的示例来重现该问题，因此我制作了一个基本示例here（与上面的链接相同）。我没有使用react，因为它与问题无关，您也可以实现它也是您的react应用。（如果不能，请提供react示例，我会帮助您，但imo不会太困难）

Answer 2

React支持以下事件，您可以像按下按键一样使用它们

鼠标滚轮：使用onWheel事件
滚动：使用onScroll事件
触摸板：使用onTouchCancel onTouchEnd onTouchMove onTouchStart

更多事件列表在这里：https://reactjs.org/docs/events.html#touch-events

内容固定后，可以触摸或滚动浏览

2 个答案: