Minimal One Page Scroll In Pure JavaScript – skrllr.js

Preview:

Description:

skrllr.js is a lightweight, flexible JavaScript plugin that implements the basic, touch-enabled fullscreen one page scrolling effect to your long web content. Also supports for mouse wheel and keyboard interactions.

The Skrllr library lets you transform your website into a one page scroll website that allows users to scroll one page at a time

How to use it:

Add sectioned pages to the html document as this:

<div class="wrapper">
  <main>
    <section class="section">
      <h1>Section 01</h1>
    </section>
    <section class="section">
      <h1>Section 02</h1>
    </section>
    <section class="section">
      <h1>Section 03</h1>
    </section>
    <section class="section">
      <h1>Section 04</h1>
    </section>
    <section class="section">
      <h1>Section 05</h1>
    </section>
  </main>
</div>

Create a navigation for your one page scrolling website:

<nav class="main-menu">
  <ul class="pagination">
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
  </ul>
</nav>

The CSS to make the sectioned pages fullscreen.

.skrllr-wrapper {
  position: relative;
  display: block;
  width: 100vw;
  height: 100%;
  padding: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.skrllr-section {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.wrapper {
  height: 100% !important;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}

Style the navigation:

.main-menu {
  position: absolute;
  top: 50%;
  right: 20px;
}
.pagination { list-style: none; }
.pagination li {
  position: relative;
  width: 20px;
  height: 20px;
  margin-bottom: 10px
}
.pagination li a {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  margin-bottom: 10px
}
.pagination li a:hover,  .pagination li a.active {
  background-color: white;
  border: 2px solid black;
}

Initialize the Skrllr on the “main” content.

const skrllr = new Skrllr('main', {
      // options here
})

Config the one page scroll behavior.

const skrllr = new Skrllr('main', {
      // child container
      container: 'section',
      // easing function
      easing: 'ease',
      // transition time in ms
      transitionTime: 1000,
      // shows pagination
      pagination: true,
      // custom menu
      menu: null,
      // auto update url when switching
      updateURL: false,
      // callback functions
      beforeTransition: null,
      afterTransition: null
      
})