Smooth Drag To Scroll Library – Scrollbooster

Category: Animation , Drag & Drop , Javascript , Recommended | January 9, 2020
Author:ilyashubin
Views Total:1,486 views
Official Page:Go to website
Last Update:January 9, 2020
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
})

Set the scroll direction. Default: ‘all’.

let scr = new ScrollBooster({
    direction: 'all', // 'vertical', 'horizontal'
})

Set the pointer type. Default: ‘all’.

let scr = new ScrollBooster({
     pointerMode: 'all', // 'touch', 'mouse'
})

Enable/disable text selection. Default: ‘false’.

let scr = new ScrollBooster({
     textSelection: true
})

Enable/disable focus for elements: ‘input’, ‘textarea’, ‘button’, ‘select’ and ‘label’. Default: ‘true’.

let scr = new ScrollBooster({
     inputsFocus: 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);

// Scrolls to a point
scr.scrollTo(x,y);

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

// update options
scr.updateOptions(OPTIONS);

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

// Destroy
scr.destroy();

Changelog:

v2.1.0 (01/09/2020)

  • add borderCollision property to state

v2 (01/02/2020)

  • remove handle option
  • rename mode option to direction (supported values has changed to horizontal, vertical or all)
  • add inputsFocus option
  • add pointerMode option
  • add scrollTo method
  • add updateOptions method
  • rename getUpdate method to getState
  • State object is passed to onUpdate, onClick and shouldScroll options as first param. Old state param has props isRunning, isDragging, isScrolling, position, dragOffsetPosition, viewport and content. Some of there props were misleading and caused confusion. New state param only contains isMoving, isDragging, position and dragOffset properties.
  • ScrollBooster now listens images load event in scrollable content and updates its metrics automatically, so no need to call updateMetrics manually

10/31/2018

  • Added more callback functions

You Might Be Interested In:


Leave a Reply