Vertical One Page Scroller In Vanilla JavaScript

Category: Javascript , Slider | April 29, 2020
Views Total:1,741 views
Official Page:Go to website
Last Update:April 29, 2020


Vertical One Page Scroller In Vanilla JavaScript


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 1
    Section 2
    Section 3
    Section 4

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)

You Might Be Interested In:

Leave a Reply