Vertical One Page Scroller In Vanilla JavaScript

Preview:

Description:

A responsive, touch-enabled scroller for one-page scrolling website, vertical page slider, web app onboarding and much more.

How to use it:

1. Download and load the Scroller.css & Scroller.js in the document.

<link rel="stylesheet" href="Scroller.css" />
<script src="Scroller.js"></script>

2. Load the swiper.js to enable touch support.

<script src="swiper.js"></script>

3. Add content sections to the page.

<main id="root">
  <section>
    Section 1
  </section>
  <section>
    Section 2
  </section>
  <section>
    Section 3
  </section>
  <section>
    Section 4
  </section>
  ...
</main>

4. Initialize the scroller.

document.addEventListener('DOMContentLoaded', function () {
  const scroller = new Scroller('#root');
  document.addEventListener('wheel', (event) => scroller.listenScroll(event));
  document.addEventListener('swipeUp', () => scroller.scroll(1));
  document.addEventListener('swipeDown', () => scroller.scroll(-1));
  document.addEventListener('keydown', (event) => {
    switch (event.keyCode) {
      case 40:
        return scroller.scroll(1)
      case 38:
        return scroller.scroll(-1)
      default:
        return;
    }
  })
})