javascript – 修复内容时​​导航或滚动导航

2023年4月24日 147次阅读

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

问题在于我无法将每个页面(幻灯片)固定在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;

最佳答案 TL; DR
https://codepen.io/devanshj/pen/RvmMpM

>对于轮子部件,你是正确的,滚动事件不会触发(因为没有内容溢出,因为页面是位置：固定).但wheel赛事无论如何都会开火.然后我们可以使用wheel事件中的wheelDelta来获取滚动的方向.
>对于滑动部分,我们的问题可以解决,如果我们有一些东西滚动和用户滑动会触发滚动事件.但事实并非如此.在我们的例子中,我们必须从touchstart,touchmove和touchend等事件中找出滑动事件.有一个名为hammer.js的7kb库可以完成所有这些工作,我们可以简单地收听像swipeup这样的事件.
>您没有提供适当的样本来重现问题,因此我制作了一个基本样本here(与上面的链接相同).我没有使用反应,因为它与问题无关,你可以实现这也是你的反应应用程序. (如果你不能,提供反应样本,我会帮助你,但是它不会太难)

点赞