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

Question

I am trying to add scrolling navigation to a presentation style landing page in React and GatsbyJS .

The issue lies in that I cannot where each page(slide) is fixed at 100% height and no scrolling occurs.

As you can see from the below code, the keydown listener navigates using the down arrow, but how can I achieve the same action from a mousewheel, scroll, touchpad or swipe down?

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

1. For the wheel part, you are correct that scroll event won't fire (because there's no content overflowing as the pages are position: fixed ). But the wheel event will fire regardless. And then we can use the wheelDelta from the wheel event to get the direction of the scrolling.

2. For the swipe part, our problem could have been solved if we had some stuff scrolling and user swiping would fire an scroll event. But that's not the case. In our case we'll have to figure out swipe event from events like touchstart , touchmove and touchend . There's a 7kb library called hammer.js that does all that stuff and we can simply listen to events like swipeup .

3. You have not provided an appropriate sample to reproduce the problem, so I have made a basic sample here (same as above link). I have not used react because it's irrelevant to the problem, you can implement this is your react app too. (If you can't, provide the react sample and I'll help you out but imo it won't be too hard)

Answer 2

React supports following events and you can use them in similar manner to keydown

• mousewheel : use onWheel event
• scroll : use onScroll event
• touchpad : use onTouchCancel onTouchEnd onTouchMove onTouchStart

more list of events is here : https://reactjs.org/docs/events.html#touch-events