Smooth Drag To Scroll Library – Scrollbooster

Category: Animation , Drag & Drop , Javascript , Recommended | March 20, 2018
Author: ilyashubin
Views Total: 125
Official Page: Go to website
Last Update: March 20, 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
})

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();

Leave a Reply