> iScroll 3.5 adds scrollToElement()

The most requested feature for iScroll was probably the ability to programmatically scroll to an element by #id. v3.5 adds this feature and much more. You can actually scroll to any element from a CSS3 query selector opening the door to hardware accelerated carousels.

Syntax for scrollToElement() is straight forward:

iScroll.scrollToElement({CSS3-selector}, [string runtime]);

CSS3-selector can be any query returning at least one element. If more elements are returned, only the first one is counted. runtime is optional (defaulted to 450ms) and represent the animation duration. To jump to the element without animation just set it to '0s'.

Some examples:

// Scroll to element by #id with a 1 second animation
myScroll.scrollToElement("#id", "1s");

// Scroll to the forth LI in the list with no animation
myScroll.scrollToElement("ul > li:nth-child(4)", "0s");

// Scroll to the first LI with default animation duration
myScroll.scrollToElement("ul > li");

Currently iScroll doesn’t check for location hash nor hash changes (eg: index.html#id). This can be easily implemented and I’m evaluating if this feature should be included in the default script. As you know I’m trying to keep iScroll as bare bone as possible.

The scrollToElement method gives us a free bonus: carousels. Have a look at this screencast which shows a lame-but-functional iScroll powered carousel. The carousel demo is also included in the latest zip file.

v3.5 also fixes a nasty bug with scrollbars and multiple iScroll instances.

What’s next? The other most requested feature is snap-scroll. Probably I’m not going to add this feature to iScroll itself but I’ll release a new script just for that. So stay tuned.

I’m also working on a more complex framework, some of you might have already watched the GhostTouch sneaky video. It will be released really soon and it’s just 14kb plus a bunch of CSS.

And now let me thank all those who supported iScroll (and the other scripts) by funding development via the recently added Paypal donation button. I hate to call them “donations” as you actually get something valuable in return but it seems to be widely used and recognized in the open source community. So I’m not going to argue.





Now jump to the iScroll project page.

/Share the joy

/Reactions

  • Great additions !!
    Thanks a lot

    • Author: H4CK3R
    • Posted on: 2010/07/27
    • At: 19:14

    WOW, great work.
    GhostTouch looks awesome!!

    • Author: Chris
    • Posted on: 2010/07/28
    • At: 03:56

    Very nice! Have you seen the new mobile app html5 framework for iphone and android? It’s called Sencha Touch!

    Check it out at:
    http://www.sencha.com/products/touch/

    • Of course I know Sencha ;) GhostTouch has different goals. It’s extremely small, fast and self contained.

      • Author: H4CK3R
      • Posted on: 2010/07/28
      • At: 21:30

      Sencha Touch is brilliant, but EVERYTHING is done in javascript there is no (or very very very little) html involved and it’s quite big.

      GhostTouch seems like it’ll be a more traditional framework in that it lets you do things in HTML but all the cool stuff is done with javascript. Also i think it’d be like iSroll so it’s very lightweight and refined.

        • Author: LOLMAN
        • Posted on: 2011/11/18
        • At: 14:23

        Omg do you rly thinkg Sencha Touch is soo great? You should give yourself another Name, l33tboy..

    • Author: vp
    • Posted on: 2010/07/28
    • At: 22:19

    Matteo, Nice update ….

    Does, this version solved th dropdown/select box issue in a html form?

      • Author: Troy
      • Posted on: 2010/07/30
      • At: 02:08

      I also am interested in this. I am having problems with form inputs.

      Anyone have any hacks to get it working for the time being?

    • Dropdowns still don’t work, but they are next in my to-do list. Input fields should work instead.

      • Author: towser
      • Posted on: 2010/08/10
      • At: 08:26

      a workaround I made to make the “select” field working is the following :

      in the touchStart function just replace :
      ——
      e.preventDefault();
      e.stopPropagation();
      ——
      by
      ——
      if (e.target.nodeName != “SELECT”) {
      e.preventDefault();
      e.stopPropagation();
      }
      ——

      for me it works fine.

      Hope this helps

      • Author: blobb
      • Posted on: 2010/08/12
      • At: 10:40

      this is what i did on the window onload function (using jquery):

      $(‘#wrapper’).find(‘select, input:checkbox’).each(function(i) {
      $(this).bind(‘touchstart’, function(e) {
      e.stopPropagation();
      });
      });

      That way i don’t need to mess with the iscroller script.
      I did have to move the e.preventDefault() from touchStart() to touchMove(), but that’s for another problem.

    • Author: Freeed
    • Posted on: 2010/08/04
    • At: 17:26

    Hi Matteo!

    Is there any way to allow the Copy/Paste iOS function using iScroll?

    Maybe an option when creating new iScroll object to allow or not?

    Should be really usefull! (comments about it on your previous posts but no answer)

    Very nice work by the way, love your site and plugins!

    • I think that is regulated just by -webkit-user-select:none; in the css

    • Author: Freed
    • Posted on: 2010/08/05
    • At: 11:23

    Hi Matteo,

    I found this css property on phonegap web site so I tried set -webkit-user-select:auto. It works well without iScroll but do not work when iScroll is set.

    Maybe because of the e.preventDefault on the touchStart method?

    Is there any way to tweak this?

    • you may try to remove the preventdefault from touchstart and place it on touchmove

      • Author: Freeed
      • Posted on: 2010/08/05
      • At: 16:16

      It works!! Thxs a lot!

      I use 4 iScroll objects in my app, some of them need to allow copy/paste and some other not.
      Moving the e.preventDefault() in the touchMove method create some problems with iscroll objects where copy/paste aren’t allowed.
      So my final solution is a new iscroll option, which can do the e.preventDefault in the touchStart method by default, and in the touchMove method if the option is set!

      If it can help! This works.

    • Author: blobb
    • Posted on: 2010/08/12
    • At: 08:33

    Hi Matteo,

    Great script!
    You mentioned something about how iscroll is not currently checking for location hash and that it’s simple implementation. Would you mind letting me know how to implement the location hash for iscroll?

    Thanks!

    • If hash is the id of the element you want to scroll to… all you have to do is to watch for hash changes and scrollToElement(hash). iOS and Android>=2.1 support hashChange event, for the others you have to set a timeInterval.

    • Author: Ellsass
    • Posted on: 2010/08/23
    • At: 04:07

    It seems to work just fine for classes (div.myClass) but not IDs (div#myId). If it makes a difference, the IDs I’m trying are 10-digit numbers. I am converting them to strings before calling scrollToElement() just to be safe.

    My work-around has been to add the class “jumpTo” to document.getElementById(myId) and then call scrollToElement(‘div.jumpTo’), which seems unnecessary, but it works.

    • this is weird. I’ll check it out.

    • Author: Brian
    • Posted on: 2010/11/11
    • At: 08:43

    Hi Matteo,

    I’m having a new issue with select inputs (unrelated to those already solved on this thread)

    When clicking on a select input that is *towards the bottom* of the scrollable area, and the native iPhone UI appears on the bottom, the content within the wrapper is shifted up. When you close the select options, you can only view the area from the bottom of the content minus the mask height– you can’t scroll up past the bottom-most visible area. I tried calling the refresh() method on the change event of the select input but that doesn’t seem to work.

    I’ve only tested this on iOS4. Let me know if you have any insight as to why this may be happening, or if you need a more descriptive bug report.

    • Author: Colleen Liley
    • Posted on: 2011/01/03
    • At: 16:33

    You said that “Currently iScroll doesn’t check for location hash nor hash changes (eg: index.html#id). This can be easily implemented and I’m evaluating if this feature should be included in the default script.”

    Could you provide a quick example of how to achieve this please?