Skip to content

Scrolly: fast vanilla JS scrollbar plugin with React.js Component & jQuery/Zepto/jBone plugin.

License

Notifications You must be signed in to change notification settings

annexare/scrolly.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Scrolly: fast vanilla JS scrollbar plugin

Monthly Downloads NPM Twitter

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);
// Body element is also supported
var id = scrolly.barNode(document.body, 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.