smooth-scroll-handler

Based on https://stackoverflow.com/a/47206289/9006591

Usage no npm install needed!

<script type="module">
  import smoothScrollHandler from 'https://cdn.skypack.dev/smooth-scroll-handler';
</script>

README

smooth-scroll-handler

Handles mouse smooth scrolling.
Package based on Manuel Otto's answer to this post: https://stackoverflow.com/a/47206289/9006591

It fixes a bug with the original code, where the page scrolled back to its original position if you used the arrow keys to scroll, or if you dragged the scrollbar up or down.
It also provides onStart and onStop callbacks.

Install

npm i smooth-scroll-handler

Usage

import ScrollHandler from 'smooth-scroll-handler';

const scrollHandler = new ScrollHandler(120, 12); // speed, smooth

Methods

let options = {
    duration: 1000,
    // Duration of the animation in milliseconds.
    // Default is 500.

    scrollPriority: true,
    // Defines if the scrollTo animation should have priority over a manual scroll.
    // If set to true, the scrollTo method will stop any ongoing scroll and prevent any
    // new manual scrolling for the duration of the animation.
    // If set to false, the scrollTo methid will stop any ongoing scroll but any new
    // manual scroll will stop its animation.
    // Default is false.

    offset: 200
    // Offset of the scrollTo stop position, from the target element.
    // A positive value will stop the scrollTo position above the target element.
    // Can be usefull when the page contains a sticky header, for instance.
    // Default is 0;
}
scrollHandler.scrollTo('#somewhere', options);

Callbacks

scrollHandler.onStart = () => {
    console.log('scroll started');
}

scrollHandler.onStop = () => {
    console.log('scroll stopped');
}

Todo

  • Returning speed of scroll
  • Returning completion