scrolly

Scrolly: fast vanilla JS scrollbar plugin

Aim is a fast + good looking scrollbar with zero dependencies, small size & major browsers support. So, the Browser Support is same as for MutationObserver, works in all modern browsers for Desktop and Mobile.

Install, via Bower or NPM

• bower install scrolly
• npm install scrolly

Features & Usage

• Small (~6KB minified), fast, vanilla JS (zero dependencies)
• Nested scrollbars
• Touch support
• jQuery/Zepto/jBone plugin
• React.js Component
• Infinite scroll (top/bottom edge reach) callbacks

// Initialize
var ids = scrolly.bar(query|node|string, params);
// or
var id = scrolly.barNode(node, params);
 
// Update
scrolly.update(id);
// or update everything
scrolly.updateAll();
 
// Dispose
scrolly.dispose(id);
// or cleanup everything
scrolly.disposeAll();

React Component

See example usage: gulp watch and open /react. Or just look at public/react/index.html in this repo.

<Scrolly params={ params }>
    <h1>Some test contents here</h1>
    <p>Contents to be scrolled...</p>
</Scrolly>

jQuery/Zepto/jBone Plugin flavour

// jQuery Plugin
$('.selector').scrolly();
// ...and it's chained as well
 
// Update
$('.selector').scrolly('update');
 
// Dispose
$('.selector').scrolly('dispose');

Demo

Just open public/index.html, or check the Live demo. For React Component demo check public/react/index.html or scrolly/react.

Details

Data: DOM elements

data        LESS:
{
  wrap      .scrolly
  area        .area
  bar       .scrolly + .bar
  thumb       .thumb
}

Data: numbers

• data.wrapRatio: float 0..1. Calculated as wrapSize / areaSize. When === 1 no scrollbar is shown.

Setup

1. Clone this repo.
2. Install Node.js. Then Gulp: npm install -g gulp.
3. Terminal, from project directory:
   • Dev dependencies: npm install.
   • gulp -T to see all available stuff.
   • gulp watch to run a local dev server, open in on localhost:3001.
   • gulp build-all to clean & build everything.