iscroll-component v3.2.0

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