sweet-scroll.js

Modern and the sweet smooth scroll library.

scroll

Features

Introduce sweet-scroll.js features.

  • Dependecy-free!!
  • ECMAScript 2015+ & TypeScript frendly
  • Use requestAnimationFrame API
  • Supports vertical and horizontal scroll
  • Supports dynamic trigger (event delegation)
  • Works in IE10+, 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 or Element for fixed header (Selector of must be a valid css selector)
  duration: 1000,                 // Specifies animation duration in integer
  easing: 'easeOutQuint',         // Specifies the pattern of easing
  offset: 0,                      // Specifies the value to offset the scroll position in pixels
  vertical: true,                 // Enable the vertical scroll
  horizontal: false,              // Enable the horizontal scroll
  cancellable: 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

  // Callbacks
  before: null,
  after: null,
  cancel: null,
  complete: null,
  step: null,
}

Examples

Have prepared a sample that can try a characteristic feature of sweet-scroll.js. Or you can visit doge coin.

sweet-scroll.js licensed under MIT.