https://github.com/annexare/scrolly.js

Scrolly: fast vanilla JS scrollbar plugin with React.js Component & jQuery/Zepto/jBone plugin.
https://github.com/annexare/scrolly.js

javascript jquery react scrollbar vanilla-js zepto

Last synced: 5 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/annexare/scrolly.js
• Owner: annexare
• License: mit
• Created: 2014-12-09T15:28:10.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2018-05-06T23:34:43.000Z (over 6 years ago)
• Last Synced: 2024-10-11T17:46:20.135Z (about 1 month ago)
• Topics: javascript, jquery, react, scrollbar, vanilla-js, zepto
• Language: JavaScript
• Homepage: https://annexare.github.io/scrolly.js/
• Size: 975 KB
• Stars: 18
• Watchers: 4
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Scrolly: fast vanilla JS scrollbar plugin

[![Monthly Downloads](https://img.shields.io/npm/dm/scrolly.svg)](https://www.npmjs.com/package/scrolly)

[![NPM](https://img.shields.io/npm/v/scrolly.svg "NPM package version")](https://www.npmjs.com/package/scrolly)

[![Twitter](https://img.shields.io/twitter/follow/annexare.svg?label=follow+@annexare)](https://twitter.com/annexare)

Aim is a fast + good looking scrollbar with zero dependencies, small size & major browsers support.

So, the **Browser Support** is same as for [`MutationObserver`](https://developer.mozilla.org/en/docs/Web/API/MutationObserver#Browser_compatibility), 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

```js

// 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](http://localhost:3001/react/). Or just look at `public/react/index.html` in this repo.

```jsx

    
Some test contents here

    
Contents to be scrolled...


```

### jQuery/Zepto/jBone Plugin flavour

```js

// 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](https://annexare.com/js/scrolly/). For React Component demo check `public/react/index.html` or [scrolly/react](https://annexare.com/js/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](http://nodejs.org/). Then [Gulp](http://gulpjs.com/): `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](http://localhost:3001/).

    * `gulp build-all` to clean & build everything.