iscroll-component
v3.2.0
Published
improved scrollable for element on all platform
Downloads
133
Readme
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.
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 containingtop
andbottom
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 handlebaropts.max
set maxium translateY default 80opts.barClass
className for handlebar element, use this to replace default handlebar className which isiscroll-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