Finally it’s ready: The first alpha of TouchScroll 0.2.
Edit: I’ve changed the method for animation chaining in alpha2, performance should be much better compared to alpha1

Please note that this version is not android-compatible yet. The final 0.2 will be, though.

You can try the new version online (old demo with new TouchScroll) or grab it from github – use the “experimental” branch or download the package.

New Features/Bugfixes:

  • The codebase has been cleaned up. No more super-closure that hides the whole implementation. The new codebase should make it easier to fix existing bugs and add features. BTW: I am looking for skilled JavaScript Ninjas that would like to team up w/me for this project.
  • The stylesheet is dynamically created and inserted into the DOM. No extra stylesheet is needed (but may be used to customize scrollbars).
  • Squeezed scrollbars stay round.
  • Can fire DOM scroll events (add scrollevents: true to the instantiation options). The scroll event has a special touchscroll property referencing the scroller instance. You can query scrollLeft and scrollTop on the instance (rather than on event.target).
  • If a scroller is scrolled to the bottom and its content is changed, the scroller is restricted to its bounds, whereas the new content would be invisible with the old version.
  • TouchScroll instances now sport a DOM/BOM facade (see API below). An example: You can set innerHTML on an instance without having to know about its internals.
  • Scrolls focused elements into view. This is useful when using the “next”/“previous” buttons in forms and might also work with Androids cursor. This feature is in a very early stage and does not work perfectly.
  • The overall number of function calls has been reduced. The performance still isn’t on par with native scrolling on the 3G and might never be.

Roadmap

  • Document public and private API in the Wiki.
  • Make it Android compatible again. This might include using scrollTop/scrollLeft for older versions (< 2).
  • Fix all bugs in the issue tracker.
  • Make the feature set more stable – iPhone 3G shows double animations at times, etc.
  • Reduce the size of the minified version by using closure compiler with ADVANCED_OPTIMIZATIONS.

How You Could Help

  • I am looking for skilled team members for TouchScroll. If you can read and understand the source code this might be a good start ;-)
  • You could retweet my original alpha announcement tweet. 25 retweets within 7 days will make me win an iPad (to test TouchScroll on).

Instantiation:

As always:

var scroller = new TouchScroll(domNode[, config]);

config is an object with the following properties (all optional):

  • elastic: Whether the scroller bounces. Defaults to false.
  • scrollevents: Whether the scroller fires DOM scroll events. Defaults to false.
  • scrollbars: Whether to show scrollbars. Defaults to true.

Public API:

  • elastic: Boolean. Whether the scroller bounces – defaults to false.
  • scrollevents: Boolean. Whether to fire DOM scroll events – defaults to false.
  • addEventListener: DOM facade method. Adds an event listener to the innermost scrolling layer.
  • appendChild: DOM facade method. Appends a child to the innermost scrolling layer.
  • centerAt: function (left, top[, duration]). Centers the scroller at the given coordinates, with optional animation duration.
  • childNodes: DOM facade property. References the child nodes of the innermost scrolling layer.
  • children: DOM facade property. References the element child nodes of the innermost scrolling layer.
  • config: Object. Refer to the wiki for details
  • firstChild: DOM facade property. References the first child node of the innermost scrolling layer.
  • firstElementChild: DOM facade property. References the first element child node of the innermost scrolling layer.
  • hideScrollbars: function. Hides the scrollbars.
  • innerHTML: DOM facade property. Gets/sets the innerHTML property of the innermost scrolling layer.
  • innerText: DOM facade property. Gets/sets the innerText property of the innermost scrolling layer.
  • insertBefore: DOM facade method. Works on the innermost scrolling layer.
  • lastChild: DOM facade property. References the last child node of the innermost scrolling layer.
  • lastElementChild: DOM facade property. References the last element child node of the innermost scrolling layer.
  • querySelector: DOM facade method. Works on the innermost scrolling layer.
  • querySelectorAll: DOM facade method. Works on the innermost scrolling layer.
  • replaceChild: DOM facade method. Works on the innermost scrolling layer.
  • scrollBy: function (left, top[, duration]). Scrolls by the given amount of pixels, with optional animation duration.
  • scrollLeft: BOM facade property. Gets/sets the left scroll offset.
  • scrollTo: function (left, top[, duration]). Scrolls to the given coordinates, with optional animation duration.
  • scrollTop: BOM facade property. Gets/sets the top scroll offset.
  • setupScroller: function ([force]). Adapts the scroller to its dimensions if dimensions have changed or force is true.
  • showScrollbars: function. Hides the scrollbars.
  • snapBack: function ([axis[, duration]). Snaps the scroller back into its bounds. It should not be necessary to call this method manually.