Navigate on touch or scroll when content is fixed

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;

from Navigate on touch or scroll when content is fixed