Smooth Drag To Scroll Library – Scrollbooster

Category: Animation , Drag & Drop , Javascript , Recommended | October 31, 2018
Author: ilyashubin
Views Total: 658
Official Page: Go to website
Last Update: October 31, 2018
License: MIT

Preview:

Smooth Drag To Scroll Library – Scrollbooster

Description:

Scrollbooster is a small and zero-dependency JavaScript library that provides the smooth drag-to-scroll functionality (with or without an inertia bounce effect) for any content.

How to use it:

Install and import the Scrollbooster library.

# NPM
$ npm install scrollbooster --save
import ScrollBooster from 'scrollbooster'

Alternatively, you can manually load the ‘scrollbooster.min.js’ script to your document as this:

<script src="dist/scrollbooster.min.js"></script>

Add your scrollable content to a viewport element.

<div class="app">
  <div class="app-inner">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem corrupti reiciendis, mollitia molestias magni quasi voluptates culpa dignissimos minima hic.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. In praesentium odit ex officia, possimus qui omnis, facere incidunt neque ducimus suscipit! Vel, neque! Sapiente tempora veritatis voluptatem itaque! Repellendus, optio.
  </div>
</div>

Active the smooth drag-to-scroll functionality on the content.

let viewport = document.querySelector('.app')
let content = viewport.querySelector('.app-inner')

let scr = new ScrollBooster({
    viewport: viewport,
    content: content,
    onUpdate: (data)=> {
      // viewport.scrollLeft = data.position.x
      // viewport.scrollTop = data.position.y
      content.style.transform = `translate(
        ${-data.position.x}px,
        ${-data.position.y}px
      )`
    }
})

Enable or disable the Inertia bounce effect.

let scr = new ScrollBooster({
    viewport: viewport,
    content: content,
    bounce: true,
    bounceForce: .1,
    friction: .05
})

If you want to emulate viewport mouse wheel events.

let scr = new ScrollBooster({
    viewport: viewport,
    content: content,
    emulateScroll: false
})

More callbacks.

let scr = new ScrollBooster({

    // Function that receives object with scrolling metrics and event object. 
    // Calls after each click in scrollable area. 
    // Here you can, for example, prevent default event for click on links
    onClick: function(){},

    // Function that receives object with scrolling metrics and event object. 
    // Calls on pointerdown (mousedown, touchstart) in scrollable area. Here you can return true or false to start actual scrolling or not
    shouldScroll: function(){}
    
})

API methods:

// Sets new scroll position in viewport. 
scr.setPosition(x,y);

// Updates element's size
scr.updateMetrics();

// Returns current metrics and coordinates in a same format as onUpdate
scr.getUpdate(); 

// Destroy
scr.destroy();

Changelog:

10/31/2018

  • Added more callback functions

You Might Be Interested In:

Leave a Reply