This project provides a kinetic scroll for webkit-based browser that mimics iOS one. Key difference from all similar projects out there lies in the fact that this one uses canvas to render scroll itself. Canvas approach has to advantages:
- there's no need to include any scroll styles or images;
- it allows more precise rendering of the scroll in hi-dpi mode.
Assuming that you have following structure of the the scrollable element:
<div id="wrapper">
<div id="content">
…
</div>
</div>
You just need to pass a wrapper node to kinetic scroll constructor:
new KineticScroll(document.getElementById('wrapper'));
It's necessary to have inner element encapsulating all the content (#content
in this case) because this is what actually moves when you scroll the page.
Options hash can be passed as optional second argument to the constructor containing any of the following properties:
vertical
— (defaulttrue
) allow vertical scroll.verticalBar
— (defaulttrue
) show vertical scroll bar when scrolling.horizontal
— (defaultfalse
) allow horizontal scroll.horizontalBar
— (defaultfalse
) show horizontal scroll bar when scrolling.ignoredSelector
— (default"input, textarea, select"
) determines touching which elements doesn't trigger scroll.paginated
— (defaultfalse
) enables paginated scroll; direction is determined based on previous options.onPageCountChange
— (defaultnull
) callback for page count change when in paginated mode. It's also called right after constructing scroll allowing you to build page indicator if necessary.onCurrentPageChange
— (defaultnull
) callback for current page change. Only used in paginated mode.
To see the demo download or clone this repo and open index.html
in a Webkit-based browser (like Google Chrome or Safari).
Copyright (c) 2012 Dmitriy Kubyshkin
Dual licensed under the MIT and GPL licenses: http://www.opensource.org/licenses/mit-license.php http://www.gnu.org/licenses/gpl.html