Ractive component wrapping IScroll library.
-
npm install ractive-component-iscroll
-
Include CSS for
.scroll-wrapper
and.scroller
(see iscroll.css for example) -
Wrap scrollable part of your template into
<Scroll>
tags (all attributes are optional):<Scroll class="myscroll" id="..." opts='{scrollbars: false}'> ..template.. </Scroll>
-
Define height and/or width for
.myscroll
or.scroll-wrapper
(a class assigned to each<Scroll>
) -
Require component in your app:
require('ractive-component-iscroll');
This will add
Scroll
toRactive.components
.
There is a sample application in example/
folder, check it out.
Changing opts
attribute re-creates iscroll instance.
If provided, opts.onRefresh(scroll_instance)
function is called when scroller updates.
IScroll inhibits click
events and can emit tap
events instead.
Some iscroll options do not work (e.g. fadeScrollbars: true
), don't know why yet.
MutationObserver is used to detect when scroll should be updated.
MIT