TouchScroll is a JavaScript/CSS 3-based scrolling layer for Webkit Mobile, espeacially iPhone, Android, and iPad. It allows to configure scrolling behaviour in many ways and to use fixed interface elements.
TouchScroll depends on css-beziers, a library for computations on cubic bezier curves.
To use TouchScroll you need an element with fixed height. Have a look at the demo for an elegant solution using display: -webkit-box
.
The stylesheet is mandatory at the moment. It will be made optional in the future for cases when scrollbars aren’t needed.
<link rel="stylesheet" src="https://github.com/davidaurelio/TouchScroll/raw/master/touchscroll.css">
<!-- … -->
<div id="scroller">
<!-- contents go here -->
</div>
<script src="https://github.com/davidaurelio/TouchScroll/raw/master/css-beziers.js"></script>
<script src="https://github.com/davidaurelio/TouchScroll/raw/master/touchscroll.js"></script>
<script>
var scroller = new TouchScroll(document.querySelector("#scroller"));
</script>
To enable the elasticity/bouncing effect, add {elastic: true}
as second parameter to the instantiation:
<script>
var scroller = new TouchScroll(document.querySelector("#scroller"), {elastic: true});
</script>
Set the scroller to overflow: auto
to enable scrolling in other environments.
The scroller automatically adapts its size to content changes and window resizes/orientation changes.
<div>
s are inserted inside of the scroller, the CSS
child selector (#scroller > foo
) might not work as expected.setupScroller
method to fix that (e.g. after making a scroller visible by setting display: block
on it).E-Mail: da AT uxebu.com Twitter: @void_0