sweet-scroll.js

Modern and the sweet smooth scroll library.

scroll

Features

Introduce sweet-scroll.js features.

  • Dependecy-free!!
  • ECMAScript 2015(ES6) frendly
  • Use requestAnimationFrame API (IE9 works in setTimeout instead)
  • Supports vertical and horizontal scroll
  • Supports dynamic trigger (event delegation)
  • Works in IE9+, and all modern browsers.

Getting started

sweet-scroll.js is you can start using the very very simple.

1. Install from npm.

$ npm install sweet-scroll

2. Import the package, create an instance.

import SweetScroll from "sweet-scroll";

document.addEventListener("DOMContentLoaded", () => {
  const sweetScroll = new SweetScroll({ /* some options */ });
}, false);

3. Enjoy the smooth scrolling!!

Please detailed document viewed in GitHub.

Default Options

The following options are applied by default. It can be customized as needed.

{
  trigger: "[data-scroll]",       // Selector for trigger (must be a valid css selector)
  header: "[data-scroll-header]", // Selector for fixed header (must be a valid css selector)
  duration: 1000,                 // Specifies animation duration in integer
  delay: 0,                       // Specifies timer for delaying the execution of the scroll in milliseconds
  easing: "easeOutQuint",         // Specifies the pattern of easing
  offset: 0,                      // Specifies the value to offset the scroll position in pixels
  verticalScroll: true,           // Enable the vertical scroll
  horizontalScroll: false,        // Enable the horizontal scroll
  stopScroll: true,               // When fired wheel or touchstart events to stop scrolling
  updateURL: false,               // Update the URL hash on after scroll (true | false | "push" | "replace")
  preventDefault: true,           // Cancels the container element click event
  stopPropagation: true,          // Prevents further propagation of the container element click event in the bubbling phase
  outputLog: false,               // Specify level of output to log
  quickMode: false,               // Instantly scroll to the destination! (It's recommended to use it with `easeOutExpo`)

  // Callbacks
  beforeScroll: null,
  afterScroll: null,
  cancelScroll: null,
  completeScroll: null,
  stepScroll: null
}

Examples

Have prepared a sample that can try a characteristic feature of sweet-scroll.js.

sweet-scroll.js licensed under MIT.

QuickMode!!