iscroll

Improved scrollable element for desktop and touch device.

The goal of this library is high performance and easy to use, while keep the code simplicity.

Tested on Android > 2.2, IOS > 6 , IE > 8 and other modern browsers.

demo

click here to see what device/os_version should be supported.

This library need Object.defineProperty and CustomEvent to work properly, if not exsit, the element hack (scrollTop and scroll event) would not available

Installation

$ npm install iscroll-component

You may need webpack to build this lib

Example

<div class="scrollable">
  <div>
    <ul>
    </ul>
  </div>
</div>

First element child is used as wrapper element

var Iscroll = require('iscroll');
var el = document.getElementById('scrollable');
var scroll = new Iscroll(el);
el.addEventListener('scroll', function(e) {
  console.log(el.scrollTop);
}, false);

API

• start event is fired with y (translated) on scroll start.

• release event is fired with y (translated) on touchend.

• scroll event is fired with y (Just as scrollTop on the element) on scroll.

• scrollend event is fired with Object containing top and bottom indicate whether the element has scrolled to top or bottom.

iscroll(el, [opts])

Init iscroll with el and optional opts, set opts.handlebar to true if you want handlebar.

• opts.handlebar set to false if you need disable handlebar

• opts.max set maxium translateY default 80

• opts.barClass className for handlebar element, use this to replace default handlebar className which is iscroll-handlebar

.refresh()

Recalculate element height, call this after element height changed. Called automatically on scroll start, orientation change and window resize.

.scrollTo(y, [duration])

Set translateY to y with optional duration(ms), called when you set el.scrollTop.

.unbind()

Unbind all event listeners.

Test

npm install gulp http://localhost:8080/example/index.html

License

MIT