TouchScroll 0.2: First Alpha Available [Edit: second]


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.
  • http://thocked.com thock

    Is there a specific reason that elements within the scrollable container can’t be clicked on an iPad? For instance, unless it’s a specific anchor tag, you can’t click/touchstart on anything.

  • http://www.elsalvador.com Sergio Rivera

    I´m trying this on an iPad, but when I embed a video from YouTube, the video floats and stays at the original position even if we scroll the content…. How can I scroll embed objects with the whole page I am trying to scroll?

  • Brad

    The first alpha of 0.2 works somewhat on Android 2.2 (HTC Droid Incredible). In portrait mode it is mostly fluid scrolling but hangs every now and again when trying to modify the config fields. If I turn my phone to landscape, the page never resizes itself with the header/footer but I can still scroll what is visible.

  • http://jamus.co.uk Jamus

    You you have a demo available that doesn’t use the tabbed content? Im interested in the horizontal scrolling usage (as I sure many are) but the I’m having issues deconstructing you demo.

  • http://www.dreamink.com.mx Israel

    David,

    I was intending to use your library for a project. However, I just hit a wall and I was wondering if you, or anybody can help me.

    I have a webpage W:768px x H:1024px and I want to have the scroller on a div that’s W:470px x H:100%. It works, however the touchscroll.min.js file takes over the touches on the entire page. I need the rest of the site area to be able to receive touches so I can do more cool stuff. Is there anyway to restrict touchscroll touches to the div being affected?

    Thank you in advance.

    Israel

  • Damian

    @Israel
    I had the same problem and solved it by adding some code to the framework. I added a construction argument that lets you specify a callback function that would be called prior to do any scrolling stuff. This callback function is in charge of letting the TouchScroll objet do its magic by returning true. Is not to hard to make this change, just take a look to the code.

  • Jamie

    I could use the same functionality as Israel. I’ve got the touchscroll applied to divs in my navigation, but the script is interfering with my video elements, which are outside the nav. I read in the other touchscroll thread that the video problem has no real solution. So, being able to selectively trigger the touchscroll would be of great help.

    And as I don’t work much with javascript, it isn’t a simple thing for me to make a callback function, like Damian has done. I could really use some sample code to work from…

  • greg

    Great library David – thank you for releasing this.
    I’m trying to get horizontal and vertical scrolling to work at the same time : is this doable with ScrollTouch ?

  • Jim

    Hi David,

    I already use touchScroll and it’s brilliant. Any thoughts about extending it to work with Windows8/IE10?

    http://msdn.microsoft.com/en-us/library/windows/apps/hh689007.aspx