iScroll

The overflow:scroll for mobile webkit. Project started because webkit for iPhone does not provide a native way to scroll content inside a fixed size (width/height) div. So basically it was impossible to have a fixed header/footer and a scrolling central area. Until now.

This script has been superseded by iScroll 4. This page is kept for historical reasons.

Project info

Project state: ACTIVE (code is actively updated)
Last code update: 2010.10.08 – v3.7.1
Device compatibility: iPhone/Ipod touch >=2.0, Android >=1.5, iPad >=3.2.
Discussion Group
QR Code opens demo page.

Support development

If this script saved your day or you wish to support iScroll and other scripts development you may consider sending some funds via PayPal.





Overview

iScroll was born because mobile webkit (on iPhone, iPod, Android and Pre) does not provide a native way to scroll content inside a fixed width/height element. This unfortunate situation prevents any web-app to have a position:absolute header and/or footer and a scrolling central area for contents.

Luckily mobile webkit offers a powerful set of hardware accelerated CSS properties that can be used to simulate the missing functionality, so the iScroll development started… But there’s no rose without thorn. Making the scroll feel native has proven more difficult than expected.

How to use

First of all we need to prevent the default behavior of standard touch events. This is easily done adding preventDefault() to the touchmove event. Then initialize the iScroll object on DOMContentLoaded or on window load. Here an example:

function loaded() {
	document.addEventListener('touchmove', function(e){ e.preventDefault(); });
	myScroll = new iScroll('scroller');
}
document.addEventListener('DOMContentLoaded', loaded);

iScroll takes two parameters. The first is mandatory and is the ID of the element you want to scroll. The second is optional and can be used to pass additional parameters (see below).

On the HTML/CSS side the scrolling area needs to be wrapped by an element which determines the scroller actual size. The following is a common tags configuration for an iScroll.

<div id="wrapper">
    <div id="scroller">
        <ul>
            <li>...</li>
        </ul>
    </div>
</div>

The #wrapper also needs some classes:

#wrapper {
    position:relative;
    z-index:1;
    width:/* your desired width, auto and 100% are fine */;
    height:/* element height */;
    overflow:/* hidden|auto|scroll */;
}

That’s it. Enjoy your scrolling. Have a look at the source code of the online example to get a better idea of how the iScroll works.

Syntax

The iScroll syntax is: iScroll(mixed element_id, object options).

element_id, can be both an object pointing to or a string with the ID name of the element to be scrolled. Example: iScroll(document.getElementsByTagName('div')[1]) or iScroll('scroller')

Accepted options are:

  • hScrollbar: set to false to never show the horizontal scrollbar. The default value true makes the iScroll smartly decide when the scrollbar is needed. Note that if device does not support translate3d hScrollbar is set to false by default.
  • vScrollbar: set to false to never show the vertical bar. The default value true makes the iScroll smartly decide when the scrollbar is needed. Note that if device does not support translate3d vScrollbar is set to false by default.
  • bounce: set to false to prevent the scroller to bounce outside of boundaries (Android behavior). Default true (iPhone behavior).
  • bounceLock:, if set to true the scroller stops bouncing if the content is smaller than the visible area. Default: false (as per native iphone scroll).
  • checkDOMChanges: set to false to prevent auto refresh on DOM changes. If you switch off this feature you have to call iScroll.refresh() function programmatically every time the DOM gets modified. If your code makes many subsequent DOM modifications it is suggested to set checkDOMChanges to false and to refresh the iScroll only once (ie: when all changes have been done). Default true.
  • fadeScrollbar: define wether the scrollbars should fade in/out. Default true on iPhone, false on Android. Set to false for better performance.
  • momentum: set to false to remove the deceleration effect on swipe. Default true on devices that support translate3d.
  • shrinkScrollbar: set to false to remove the shrinking scrollbars when content is dragged over the boundaries. Default true on iPhone, false on Android. It has no impact on performances.
  • desktopCompatibility: for debug purpose you can set this to true to have the script behave on desktop webkit (Safari and Chrome) as it were a touch enabled device.
  • snap: set to true to activate snap scroll.
  • scrollbarColor: changes the color of the scrollbar. It accepts any valid CSS color (default: 'rgba(0,0,0,0.5)'

Note: options must be sent as object not string. Eg:

myScroll = new iScroll(’scroller’, { checkDOMChanges: false, bounce: false, momentum: false });

Snap scroll

When calling iScroll with “snap” option the scrolling area is subdivided into pages and whenever you swipe the scroll position will always snap to the page. Have a look at the screencast to get an idea.

Probably the best way to use “snap” is by calling it without momentum and scrollbars:

new iScroll('scroller', { snap:true, momentum:false, hScrollbar:false, vScrollbar:false });

If you keep momentum, you get a free-scrolling that will always stop to prefixed positions.

To have a perfect snapping experience the scrolling area should be perfectly divisible by the container size. Eg: If the container width is 200px and you have 10 elements, the whole scroller should be 2000px wide. This is not mandatory as iScroll doesn’t break if the last page is smaller than the container.

Methods

  • refresh(): updates all iScroll variables. Useful when the content of the page doesn’t scroll and just “jumps back”. Call refresh() inside a zero setTimeout. Eg: setTimeout(function () { myScroll.refresh() }, 0).
  • scrollTo(x, y, timeout): scrolls to any x,y location inside the scrolling area.
  • scrollToElement(el, runtime): scrolls to any element inside the scrolling area. el must be a CSS3 selector. Eg: scrollToElement("#elementID", '400ms').
  • scrollToPage(pageX, pageY, runtime): if snap option is active, scrolls to any page. pageX and pageY can be an integer or prev/next. Two keywords that snap to previous or next page in the raw. The “carousel” example in the zip file is a good starting point on using the snap feature.
  • destroy(full): completely unloads the iScroll. If called with full set to true, the scroller is also removed from the DOM.

Best practices

DOM Changes – If scrolling doesn’t work after an ajax call and DOM change, try to initialize iScroll with checkDOMChanges: false and call refresh() function once the DOM modifications have been done. If this still doesn’t work try to put refresh() inside a 0ms setTimeout. Eg:

setTimeout(function () { myScroll.refresh(); }, 0);

Performance – CSS animations are heavy on the small device CPU. When too many elements are loaded into the scrolling area expect choppy animation. Try to reduce the number of tags inside the scrolling area to the minimum. Try to use just ULs for lists and Ps for paragraphs. Remember that you don’t actually need an anchor to create a button or send an action, so <li><a href="#" onclick="..." />text</a></li> is a waste of tags. You could remove the anchor and place the click event directly on the LI tag.

Try to avoid box-shadow and CSS gradients (especially on Android). I know they are cool and classy, but they don’t play well with CSS animations. Webkit on iPhone seems to handle shadows and gradients a bit better than its counterpart on Android, so you may selectively add/remove features based on the device.

Use a flat color for the #wrapper background, images in the scroller wrapper once again reduce performance.

Important: to preserve resources on devices that don’t support translate3d (namely: Android<2.0) iScroll disables momentum, scrollbars and bounce. You can however reactivate them using the respective options.

Bugs and limitations

Form fields do not play well with CSS animations. Countermeasures have to be adopted on a case-by-case basis.

Please use the issue tracker on Google Code to submit a bug report. You can also follow day by day updates on Google Code.

Future developments

  • I’m considering Palm Pre compatibility.
  • Check for multiple consecutive changes to the DOM to prevent unnecessary calls to the refresh() function.
  • Maybe we can achive better performances with lazy loading and pre-fetching. Lazy loading takes care of loading and unloading elements when they are not needed (ie: out of the screen). Pre-fetching can be used to preload all elements to reduce flickering.

FAQ

Q: Why on Android 1.5/1.6 I’m not seeing the scrollbars?
A: On older devices iScroll disables the scrollbars and other effects. You can reactivate them passing the hScrollbar:true and/or vScrollbar:true options.

Q: Why aren’t you adding feature X?
A: I’d like to keep the iScroll as bare-bone as possible, before adding a new feature I carefully estimate the pros and the cons.

Q: I’ve developed feature X, may I send it to you?
A: Please do! It’s not guaranteed that I will add your feature to the script, but I review all code you send to me.

Q: I’m in a hurry and I need feature X to be added to your script ASAP. Can you help me?
A: Have you considered hiring me?

Revisions history

v3.7.1, 2010.10.08 – Bug fix
v3.7, 2010.10.05 – Lock scrolling direction, added bounceLock and scrollbarColor options, size optimization.
v3.6, 2010.08.24 – Bug Squashing Edition.
v3.6 beta 1, 2010.08.10 – Added snap scroll.
v3.5.1, 2010.07.30 – Mandatory bug fix.
v3.5, 2010.07.27 – Added scrollToElement() method, fixed a bug with scrollbars and multiple iScroll instances, a bit of code clean up.
v3.4.5, 2010.07.04 – Prevent JS error on browsers not supporting WebKitCSSMatrix.
v3.4.4, 2010.06.30 – Better orientation detection.
v3.4.3, 2010.06.27 – Bug fix.
v3.4.2, 2010.06.24 – Bug fix.
v3.4.1, 2010.06.24 – Enhanced shrinking scrollbars.
v3.4, 2010.06.20 – Shrinking scrollbars and preliminary desktop compatibility.
v3.3, 2010.06.11 – Code freeze, let’s go for 3.4.
v3.3 beta 3, 2010.06.10 – Full (?!) Android compatibility.
v3.3 beta 2, 2010.06.08 – Better Android compatibility.
v3.3 beta 1, 2010.06.04 – Added Android >=1.5 compatibility.
v3.2.1, 2010.06.03 – Bug fix.
v3.2, 2010.05.31 – Code clean up.
v3.1 beta 1, 2010.05.06 – Added auto refresh on DOM changes.
v3.0 alpha 1, 2009.11.30 – Complete code rewrite. Scrollbars added. Optimized deceleration.
v2.3, 2009.07.09 – translate() replaced by translate3d().
v2.2, 2009.06.18 – Added OS3.0 compatibility.
v2.1, 2009.02.12 – Added refresh() function.
v2.0, 2009.02.03 – Optimized deceleration formula.
v1.1, 2009.01.18 – Removed timers.
v1.0, 2009.01.03 – Initial release.

638 thoughts on “iScroll”

  1. Amazing script! Works great on a web app I am working on.

    Is there a way this can be applied so the wrapper and the scrollable div are identified by class instead of id? I have 5 scrollers going on right now and it would reduce redundancy…

    Thanks! Very nicely done.

    1. Something like this should do the trick (didn’t test sorry, but should work):

      var i, elems, scrollers = [];
      elems = document.querySelectorAll(".theClassName");
      
      for (i=0; i<elems.length; i++) {
        scrollers[i] = new iScroll(elems[i]);
      }
  2. Hi Matteo,

    Great job!

    I’m afraid it is mandatory the element to scroll (not the wrapper) to have a fixed width / height. Isn’t it?

    I’m trying to do the trick with a text page (variable text length) and it doesnt works at espected at the end of the text.

  3. This script is the bomb! Thanks. I’ve been trying to implement (window.scrollTo(0, 1);) to hide the URL bar but I can’t get it to work. Is there an easy fix for doing this? Thanks.

  4. I tried implementing the scroller as a class but some reason it’s not working. The first page works fine but not the other ones.

    Has anyone had issues with this? Or is there something I’m missing in my code.

    Thanks!

    Here’s my code:

    function loaded()
    {
    document.addEventListener(‘touchmove’, function(e){ e.preventDefault(); });

    var i;
    var scrollers = [];
    var elems = document.querySelectorAll(“div.scroller”);
    for (i = 0; i < elems.length; i++)
    {
    scrollers[i] = new iScroll(elems[i]);
    }
    }
    document.addEventListener('DOMContentLoaded', loaded);

    CSS:

    .scroller
    {
    background: url(../images/bg.jpg) no-repeat #000;
    float:left;
    width:100%;
    padding:0;
    }

    .wrapper
    {
    position: relative;
    z-index: 1;
    width: 320px;
    height: 390px;
    overflow: hidden;
    }

  5. you’ve done a great job here. It would be great if this was a Jquery plugin that could simply be called like $(‘#div’).iscroll(). A similar plugin exists (jScrollTouch) but does not handle the smooth scrolling like you’ve accomplished

    1. I am the developer of jScrollTouch, what do you mean by smooth scrolling?

      I just released jSlideTouch to slide photos or any content.

  6. Has anyone had any luck using iScroll with jqTouch? I’m having problems because all the divs I want to scroll are hidden on load except one. O have tried only calling new iscroll when that div is shown, but I’m going to have 10 plus scrollable divs. It seems to work, but then my transitions between divs get messed up. Any thoughts would be appreciated.

    1. Hi Nathaniel,

      I dont know about jqTouch, but I got a similar transition problem with prototype and scriptaculous.

      What i found is that when the element (or a parent element) is hidden with a display ‘none’ at start, the iScroll script has problem initiating the scroll properly – probably more Safari on iPad and the webkit 3d rendering, than the script itself.

      I used display ‘hidden’ instead, and it worked. I still had to wait that my transitions ends-up before instanciating the iScroll object, because this was shredding them to pieces – 3d rendering doesnt seem to play well with thoses. But its so fast..

      Hope this will help you a bit.

      This script is so cool, nicely coded, and saved me many hours.
      Thank you Matteo !

  7. Hi Matteo,

    I would like to know if there is an easy way to prevent the scroller to go outside boundaries.

    I tried to change the constants in ‘onTouchMove’ – put 40 in place of 4, for example – and ‘momentum’, but the result was not very nice, and was not constant depending of the gestures/method. I understand that this is maybe not possible without breaking the nice transitions. Any suggestion is welcome.

    I saw you have a bounce option, and I tried to set it to false before realising it is not used in the library. Is it deprecated or a provision ?

    Again, thank you very much !

    1. To prevent the bounce effect we have to modify the touchmove and the momentum functions. It’s a quick fix and will be regulated by the “bounce” argument (just a reminder at the moment).

      I will add this functionality in the next version (couple of days).

  8. Hi Matt,

    great scripts, saved me tones of time and arguments with my boss. But i can’t get the horizontal scrolling to work properly. Do you have any suggestions?

    i set the width and height of the wrapper dynamically :

    wrapper.style.height = screenHeight-220+'px';
    wrapper.style.width = screenWidth-20+'px';

    is that the problem?

    thanks.

    1. got it, forgot the z-index value and the position absolute and top was nessesary.

      but now i’ve got another problem the content is not really sharp anymore… what could cause that kind of problem??

    2. mmmh… do you have <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />?

  9. Hi Matt,

    i think the line

    this.wrapper.style.overflow = ‘hidden’;

    is still required.
    in my application, the absence of that line in IScroll v3.2 causes the scroller to be bleed through an element which occurs just before the iscroll wrapper element.

    1. it is left to the user to add the overflow property in the stylesheet. Someone may need overflow:scroll or auto for desktop browser compatibility. Actually I could add:
      this.wrapper.style.overflow = ‘auto’; which would make it compatible with everything.

  10. Hi Matteo,

    I was just wondering does the the div ‘scroller’ and the div ‘wrapper’ have to be named those exact names?

    When I change the names, it stops working. Also, is their a limit to the amount you can use on ones page? I’ve tried to implement multiple iScrolls using the array method you suggest in the first post but it stops applying the scroller after the first div.

    1. You can name them whatever you want. And virtually there’s no limit to the number of scrollers in a page… I’d say the limit is the device memory.

    1. whoops, sorry. I’ll probably publish the updated version tomorrow (GMT+2). I added Android >=1.5 compatibility and a couple of new features but I need some more time for beta testing.

  11. On iPhone, Long touch on < a > tag link will show browser pop-up for open new window, url copy and so on.

    But on < a > link inside the iscroll area, this function does not work.

    Because preventDefault() in onTouchStart event handler will kill touchstart event for iPhone browser default event handler(touchstart event will not rise on browser default event handler, so Long touch can not detect on the browser)

    I think this preventDefault() is to stop the browser native scroll, isn’t it?

    If so, I think preventDefault() can move to onTouchMove event handler and solve this pop-up does not work problem.

    1. Yes, preventDefault() prevents the popup to come out. There’s little we can do about it. Killed popup is a little price to pay compared to the benefits of having the scroll back.

      Maybe you can try placing the preventdefault in the touchmove event instead of the touchstart.

  12. Fabulous script!

    Doesn’t addEventListener require three parameters, though? I was getting inconsistent behavior until I added a third “false” parameter to all the addEventListener calls. Then it worked great.

  13. has anyone successfully implemented a fully horizontal example of this script?

    i am having some trouble getting it to work well and resize content when the device orientation changes… any tips?

  14. Great script and it works great!

    How would I implement an iframe where the list shows. I tried adding an iframe to load a separate html page, but the page gets cut off and the scrolling won’t work. Is this even possible?

    Thanks again

  15. This is an awesome script, really appreciate the effort. I was hoping someone could lead me in the right path to get my select boxes working, and info would be appreciated.

    Thanks

    1. I am replying the solution to myself, it seems some post above talk about moving the “preventDefault” function to the ontouchmove event instead of ontouchstart, this seems to do the trick for me. Hope this helps someone else.

  16. Very cool.
    iscroll.js is what i found when i went to nike.com with my ipad.

    Congrats out to Matteo for getting something nice enough such that the guys at Nike use this.

    tight clean code – 2 thumbs up.

  17. Great job! Thank you.

    If “myScroll = new iScroll(‘id’);” is triggered by document.DOMContentLoaded then the calculation (by isScroll.js) of the dimensions of the scrolling element does not include the contribution of images contained in the scrolling element. If “myScroll = new iScroll(‘id’);” is triggered by “<body onload=…" then there is no problem.

    1. This shouldn’t be a problem as images should all have width and height properties. But, yes, window.load can be used as well. Probably an additional 100ms should be added if you use onload.

  18. Thank you so much for your plugin. I’ve been fighting for a week now trying to make this work.

    I do wish there were clearer examples for some of the interesting tidbits people leave lying around, though. Yours was the clearest (I couldn’t make head or tails of TouchScroll because of his example)

  19. Great script, most of this was very clear and much better than other examples on the web, but please could somebody give some details on how to configure the ‘options’ to this. I am having trouble getting this to work for horizontal scroll.

  20. Hi Matteo,

    You mention that Andorid browsers need a refresh after following the QR code…

    I have been launching the demo via the “Live Demo” link and from a homepage bookmark. Both of these methods require me to refresh the page in order to get correct positioning of the footer. Were you aware of this?

    My tests have been on a Nexus One with Froyo.

    Thanks again for your work on this great project 🙂

  21. I’m baffled – using v3.3 on android 2.1. I enter my page and I can scroll the div once – I see touchStart/touchMove/touchEnd events fire. If I try to scroll the div again the whole browser moves up/down, and the touch events do not fire. This did not happen with 3.1. I can’t see what change made my page not work. Any ideas to debug this?

    1. It works for me… same android version (HTC Desire). I need more feedback on this. BTW, to solve just place the 2 addeventlisteners in touchstart event in the init phase (just below the addeventlistener(‘touchstart’…) and remove the 2 removeeventlisteners.

  22. I ended up adding the “addeventlistener(‘touchstart’…) ” after the removeeventlisteners in touchEnd and that fixed the problem. Why did you move them out of the init phase, anyway?

  23. Awesome script first off. Have you had any luck or even thought about though on tackling the iPad iframe scrolling issues? The best description of the problem online without having to type it all in again that I am having is found here:

    http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html

    what’s frustrating is they scroll on the iphone but not the ipad and I’ve tried to tackle it with your script with no success and was wondering if you’ve seen it or have any insights on how to make it work?

    thanks!

  24. Hi I was wondering if anyone who has used iScroll has had any success in implementing a form with drop downs. I am using iscroll, which is awesome, but seem to be having a problem with my form. When you select a drop-down, and the iphone changes ui to allow you to make a selection, the whole scroller div is set out of whack and pushed down so that there is space below the form, but you cannot reach the top anymore, any help would be appreciated, and if I find the answer myself, I’ll reply to myself.

    Thanks
    Jim

    1. Thought I would further explain what is going on. When i click on a select button, and the apple UI brings up the select bow externally, my form seems to be getting an imaginary padding which pushes the scrollable area down, meaning alot of blank space on the bottom, and being unable to reach the top of the form anymore.

      I would really appreciate any insight, as of right now I am at a lost. Thanks for the great project

    2. I know exactly what you’re describing. I was also having the same issue with the select dropdown boxes. Here’s how I got the dropdowns to not produce the imaginary padding on select focus (iScroll v3.5). It’s a little hacky. It seems to work nicely on iPhone 3GS iOS4. I haven’t tried other devices. First, add a dummy hidden text box that unfocuses(Blur) itself on it’s onFocus event. On the select element, attach an onBlur event that triggers the focus of the dummy text box.

      Example of the solution (scroll to bottom for select boxes): http://s3.nimblelight.com/upload/iscroll-select/index.html

  25. My horizontal scrolling also stopped working when I went from 3.1 to 3.3. Only change is to replace the older version of the script. It seems that in

    this.scrollX = this.element.offsetWidth > this.scrollWidth ? true : false;

    the offsetWidth is now always equal to the scrollWidth. Any suggestions for this?

    1. That helped a little. Now I can grab a div above my wrapper and make the entire page horizontal scroll , but not the scroller div itself.

    2. *sigh* no – that’s because I made the upper div real wide, nothing to do with iScroll.

  26. Adding iScroll is causing things to break on the Pre browser. Can you provide tips on graceful degradation of iScroll in browsers that do not support it?

    Even better would be built-in graceful degradation… I fear that many people are developing mobile sites using this and not realizing that they are locking out Pre users when they do so (particularly since you mention the Pre in your introduction).

  27. I upgraded from V3.3b1 to 3.3b2 and I found out that the scroll bar is missing….

    BTW, I am doing pages working on both iPhone and Android. I really appreciate your work~!!
    Keep it up~ !

    1. There’s no scrollbar on the live demo.
      I tested with both iphone and Android (v.1.5.x)

    2. On Android 1.5 scrollbars are hidden by default to preserve resources. You can reactivate them by passing the respecting parameter (vScrollbar). On iPhone I can’t really replicate the problem. Can you try to refresh the page a couple of times? Can someone else confirm this issue?

  28. The latest version does some weird things on my site. If I am using mootools to move an (iscrollable) element down ‘under’ another element, the ‘top’ element jumps around quite a bit.

    I can’t use it for now (I have clients looking at the site) but I was hoping the latest version fixed some of the mis-read content lengths.

    I have several posts in a wordpress blog that are not registering the correct length. You can see it is you go to the site in landscape. Changing orientation fixes the misread, but I don’t want to rely on people to do this if they can’t read a column of text.

    Site is here: http://straathof.acadnet.ca/index2.php Start in landscape and click on ‘Your best five photos for the job’ to see the misread length of content.

    1. Are you correctly setting images size? (width/height). Maybe that is the problem. You could also try to disable checkDOMChanges and programmatically refresh() the contents.

  29. Hi, I’m developng an iPad project with iScroll and I have a div, on which I applied iScroll, that I don’t want to scroll horizontally.
    I tried setting hScrollBar to false but it doesn’t seem to work.
    Any solution?
    Maybe I’m just made a mistake writing the option, I don’t know.
    Can anyone help me? Thank you

  30. Just another question: are you from Italy?
    Your name sounds italian 🙂

  31. Master Matteo, image sizes in the columns are set to automatic, as are widths. I had them different before, but they stretched when given a distinct value.

    I’ll see what I can do. Perhaps limiting the height and setting the width to automatic will do.

    I’ll also check out the other. I’ve only been at this for three weeks, so all these DOMinatricks things are hard to understand. Kudos on the android, BTW. Can’t wait to hear back from my betatesters.

  32. Great work, about to upgrade to V3 on my iPhone app, but wanted to know if V3 supports Palm yet.

    1. I’d like to have it working on Palm but I don’t have the device. I stopped losing my time on simulators as they are not reliable. If someone wants to sponsor Pre development, please provide me with one device, I’ll be glad to work on it. I already bought half a dozen devices and so far none of my clients asked for Pre compatibility.

  33. Just figure out a little problem. I cannot initiate the select action of a dropdown menu in the div bounded by iScroll.

    1. Yes, I am also facing the same issue. I just replaced the list with drop-down of the simple example, and tried to access from the iPhone browser, it doesn’t allow to select any.

      Could you please share if you have any solution for this issue?

    2. There were some old comments on the original postings Matteo created for iscroll that had the solution… which is to comment the following lines in the touchStart event, and move them to the touchMove event:

      e.preventDefault();
      e.stopPropagation();

  34. Is it a possibility to prevent the default event only for the scrollable element instead of the whole document?

  35. Thank you very much for this script, Matteo!
    I got really frustrated on scroll-issues for a long time and I already gave up.
    🙁
    Keep it up and I’m really looking forward to your IE fix!

  36. The work is GREAT! Anyway, I’d really like to get rid of mobile Safari’s menu bar when using this, since it uses a lot of spaces and your script prevents it from auto hiding.
    Any clue on this?

    1. The script is not preventing the menu bar to disappear per se. You just need to make your page a bit taller 🙂 I’ll add a demo in the next release (3.4).

  37. Great fix! The two-finger approach just wasn’t going to work for me – or likely my users!

    Thanks for your efforts!

  38. First of all, thank you so much for writing this code. It seems to work really well, and has helped me in my web app dev greatly.

    I have a problem that I’ve been trying to get fixed for a while, but I just don’t know what else to try. I’m hoping you have some ideas.

    I’m running my website in full screen mode. I have an iframe that contains a document that holds the scrolling div. Everything works great — except when I have < a > tags in the bottom 44px or so of visible scrolling area.

    I’m using some jquery to handle the ‘click’ event of those tags. I check to see if the scroller was scrolling, and if it isn’t, then I update the source of my iframe with the new URL. For some reason, for any links clicked in the bottom 44px of the visible scrolling area, my click eventhandler always thinks that the scroller has just moved and therefore doesn’t redirect the user. (I’m using the code parent.myScroll.moved to see if the user is scrolling.)

    During my debugging, I added an alert to the beginning of ‘touchStart’ in iscroll.js. That alert would occur for any link higher up on the page, but not towards the bottom.

    If you have the time, I’d really appreciate your help with this. Please e-mail me if you think having the URL to my site would help.

    BTW, I’m using an iPod touch during my development.

    1. Looks like my comment above didn’t like the html I included. What it should say is in the 3rd paragraph is:

      “… except when I have anchor tags in the bottom 44px or so…”

  39. Nevermind; I figured out my problem. The page that held the iframe contained a top navigation bar that was 42px high. The page that showed within the iframe (that had the scroller area) didn’t account for the 42px offset when setting up the scrolling area. I moved my top navigation to the page that holds the scroller, and everything works fine.

    I wasn’t sure how to update iscroll.js to account for the 42px offset … any suggestions regarding that would be appreciated because I’d really prefer to have my top nav on the iframe container page.

    1. I agree. But considering time, money, and the fact that we’re migrating an existing site – this is what we’re doing. Do you have a suggestion on how to offset the scroller those 42px?

      Again, thanks for all your hard work on this project.

  40. Thank you for a great script. I have been struggling for about a week trying to get something similar to work. The scrolling is nice and smooth.

    Is there a way to make each swipe action to move the scroller a set amount? Say to the beginning of the next page. The Suzuki 50 years site (http://www.suzuki50years.com/) when viewed on the iPad is able to do it using your iScroll.

  41. Thanks again for a great script, and thanks for the reply to my previous question. How would I control the scroll position of the iscroll? Setting the scrollLeft() works in the browser but not on the ipad. :s

  42. Is there a way to only bounce horizontally?
    What I want to do is have the scroller div only scroll horizontally, and absolutely no bouncing or scrolling vertically.

    Is this a css problem or something that can be fixed with javascript?

    1. **FACEPALM** it was a CSS issue. My bad.

      Thanks for an amazing open source script. Its incredible.

      Keep the web free.

    2. Hi, I’m trying to do the same thing. Could you please let know you how this was done?

      Thanks.

    3. Okay I got it to work as well. Based on the above code, the trick is to set a width on #scroller, and eventually hide the horizontal scrollbar. Cheers!

  43. It seems that I cannot use the tag from with the on the iPhone. Is there a way to cause the spinning wheel to appear when the user needs to change his/her options in a select menu?

  44. It seems that I cannot use the select tag from within the #scroller div on the iPhone. Is there a way to cause the spinning wheel to appear when the user needs to change his/her options in a select menu?

  45. Hi Matteo, nice to know that italians make absolutely awesome stuffs.
    There is a possibility to scroll to the next (or previous) element by using the touchmove event?
    Thanks again

    1. Thanks for answer, i want to scroll to the next element by touching the right part of the scroller viewport. Till now i have intercepted the touch in the right area but i dunno how to tell to iScroll to go to the next (or previous) element.
      ex. im on the first that has a 1024px width. I touch it and automatically iScroll go to the second

      ^_^

      Thanks

    2. You should be able to use scrollTo() for that, but you have to find the element position by yourself. BTW, scroll to object and position snap are two features I’m working on right now.

  46. so i can use:
    var scroller = new Scroller(id)
    scroller.scrollTo(newX, newY);

    where X and Y are the new positions? So if i have a 1024 element i can use:
    scroller.scrollTo(1024, newY);
    scroller.scrollTo(2048, newY);
    and so on

    Cheers

  47. Hi Matt,

    I have a page that uses and “iframe” tag, basically, when you view it on a normal browser all content of the page are displayed well. But on the iphone/ipad they are not displayed properly.

    Below are the codes that I use:

    ASPX Part:

    This part of code calls the code behid.

    VB Part:

    If Not keyword Is Nothing Then

    taleoDetails.Text = “”

    Else

    keyword = “10180/jobsearch.ftl?lang=en” & campaignString
    taleoDetails.Text = “”

    End If

    CSS Part:

    #IBN_mainTable2
    {
    background-color:#FFFFFF;
    margin:-639px auto 0 auto;
    top:0px;
    border: solid 1px white;
    height: 570px;
    width: 780px;
    overflow: auto;
    text-align:left;
    }

    My problem here is that the part of the iframe is not scrollable on ipad/iphone.

    Please advice…

    Thanks in advance..

    1. below is the missing part of the VB.

      VB Part:

      If Not keyword Is Nothing Then

      taleoDetails.Text = “”

      Else

      keyword = “10180/jobsearch.ftl?lang=en” & campaignString
      taleoDetails.Text = “”

      End If

  48. Sorry for this, I am having a problem on embedding the vb part which is the most important thing of my code. maybe i can send it to your email add if its ok with you.

  49. Great small script, been looking all over for this. But the css in the examples/simple/index.html differs from the live demo in one way, making it funky and too wide:

    #scroller { … width: 1000px; … }

    In the live demo it’s 100%, and that makes it scroll only up/down which is the correct behavior i think.

    Thanks for a super script, looking forward to my own iPhone app soon.. 🙂

  50. Hi again Matteo! I’ve put it on the home screen of the iPhone to make it go fullscreen, and when doing that, the header gets partly hidden behind the operator/clock status-bar.

    I can fix this by doing #header {padding-top: 20px;} but then it looks weird when viewing it normally in Safari, the header gets a padding above the text.

    Do you know if it’s possible to detect if it’s fullscreen and adjust the placement of the header to always make it cover the entire screen?

    1. Although I’ve seen some other apps forcing the user to start it in homescreen-mode using “window.navigator.standalone”. If this is true, then it’s started from home screen. Then I don’t have to worry about how it looks from inside Safari.

      Not sure what happens on Android though with this parameter… I wouldn’t exclude Android users, that’s just rude..

      Also, I have some trouble figuring out how to actually put links on the items in the list:

      Item in list

      How do I make this execute? I figure I have to do something in the click.addEventListener, but not sure what to do.

      I want a click here to show another page with a css 3d transform (or at least slide), but I’ve only tried this with JQTouch, where you made a href=”#page”, which showed another page. Can you give me some hints on how to proceed to make a complete page out of this?

      I will probably use JQuery to load the next page with Ajax, but first I have to break out of this list..

      I really like the idea of not having to use a big bloated framework, but I guess I have to do some of the work myself to make it work.. 🙂

    2. In my opinion the best way to handle clicks is to add an event listener (eg: “click”) directly to the LIs. This way you don’t have to add extra markup. You could of course also use anchors (< a >), it should work as well.

      Regarding your question about page-flip, consider that I’m going to release a micro-framework just for that.

  51. hi
    i was just searching for a solution for the problem but the “live demo” simply doesn’t work on my iphone. any comments on this?
    thanks
    robert

  52. Hi Matt,

    I have a page that uses and “iframe” tag, basically, when you view it on a normal browser all content of the page are displayed well. But on the iphone/ipad they are not displayed properly.

    Below are the codes that I use:

    ASPX Part:

    This part of code calls the code behid.

    VB Part:

    If Not keyword Is Nothing Then

    taleoDetails.Text =

    Else

    keyword = “10180/jobsearch.ftl?lang=en” & campaignString

    taleoDetails.Text =

    End If

    CSS Part:

    #IBN_mainTable2
    {
    background-color:#FFFFFF;
    margin:-639px auto 0 auto;
    top:0px;
    border: solid 1px white;
    height: 570px;
    width: 780px;
    overflow: auto;
    text-align:left;
    }

    My problem here is that the part of the iframe is not scrollable on ipad/iphone.

    Please advice…

    Thanks in advance..

  53. What about onscroll events, is it possible to load content dinamically when scrolling with iscroll?

  54. Is there now a bug in Chrome, where you can’t set click events on elements?

    I have anchor links that i’m attaching click events ( via jquery ) now the events don’t work with the latest 2 code updates. They work fine in Safaria and FF, but not in Chrome 5.0.375.70

  55. Hi Matteo,

    Great plugin, I have a question. Should the destroy() function reset all variables(x,y’s) that the plugin uses? I’m toggling a div and it seems that calling destroy() does not “re init” the values. Any Thoughts?

    1. I tried the destrory(true) and it remove my div from the DOM all together. I ended up working around this issue with some CSS and Jquery. Thanks again.

    2. correct but I don’t think destroy() was having a problem. I think something else was going on, thanks again.

  56. I’ve made some kind of “onscroll” event adding some code to the “touchEnd” function:

    if (this.maxScrollY == this.y){
    //load more content
    }

    Maybe you can implement something better using this idea, Matteo.

    Thanks for the script.

    BTW, could someone fix the “select” and other form fields problem? I need to make them work with iscroll.

  57. is there a working way to have the style code placed in a css?
    because when i place the styles into a css the whole style wont load on the iphone, in firefox however it shows up.
    any idea why?

  58. plus i get allways two js errors:

    WebKitCSSMatrix is not defined
    [Break on this error] var has3d = (‘m11’ in new WebKitCSSMatrix()),

    and

    iScroll is not defined
    [Break on this error] myScroll = new iScroll(‘scroller’);

  59. another problem, scrollTo doensn’t work on the iphone/pad, and on firefox it instantly jumps to the designation rather than using the milliseconds parameter to scroll smoothly, any suggestions?

    ps: im using scrollTo to scroll horizontal

    1. firefox is not currently supported by iscroll (the script is targeted to webkit mobile). scrollTo() works flawlessly on ipad/iphone. Are you using negative values?

  60. ok, to sum it up:
    as “WebKitCSSMatrix is not defined” and “iScroll is not defined” the “myScroll.scrollTo(-300,0)” doesn’t work on any normal browsers. i managed to get it working now with this syntax on iphone and added the “scrollTo(300,0)” to have at least the same position change on firefox, ie. still this is a buggy solution for normal browsers.
    what i really dont understand is why the styles cant be placed in css. can you comment please.
    thanks

    1. syntax: scrollTo(x, y, time). time must be a string. eg: “200ms”. iScroll sets just the bare minimum styles it needs to operate. If you want to place everything in a stylesheet you are free to do so 🙂 just comment the setAttribute and put everything in a css.

  61. Hi Matteo,

    First of all, thanks for the wonderful job. You rock, man !
    I’ll be glad to credit you in my next project.

    I have a problem I can’t figure out to workaround, maybe you can help if you have some time (?!)

    My scrolling container has a variable width and height (triggered on the window.onresize event). Everything works fine when i resize the window, but in case of a change of device orientation (iPad), the scrolling zone doesn’t refresh -_until_ i tap on it.

    I tried to call iScroll.refresh(), but this does’nt work, I still have to tap on it to force repainting. The point is, it works fine with classical resizing, but fails in this special case.

    Any idea ?
    Thanks a lot, anyway.

    Ciao
    Jean-Philippe

    1. Try the following. Uncomment line 50, add before line 90:
      case 'orientationchange':

      If it doesn’t work change line 92 (current line 91) to:
      var that = this; setTimeout(function() { that.refresh(); }, 0);

      Let me know if it works.

    2. Matteo,
      Sorry to say that 3.4.4 doesn’t fix it,it’s even getting “worse”:
      ie;, taping on the screen doesn’t refresh correctly from now.
      I have to initiate a scrolling movement to correctly repaint the content of my div.

      I’m going to give a deeper look at your code to find a tweak, but it sounds like a css issue, maybe also in my code.

      I’ll let you know if I can manage it to work properly after a page flip.

      Ciao
      Jean-Philippe

    3. Good news !

      Last problem was due to a combination of a cache issue (it kept and older version of iScroll) and a Dojo side-effect.

      I changed it for mooTools, and even if I have to recode my main Widgets, it works now like a charm.

      Thanks again Matteo.

  62. Huhh !
    Should be a time zone problem between France and Italia…
    I’m so happy to use jscroll that I travelled in time to get 3.4.4 before you write it !

    That’s what you can call a _real_ fan 😀

  63. Ok, I am missing something. In the demo, the page is locked with exception to the scroller. No matter what I do, dragging the the header or footer still drags and bouonces the whole page vertically.

  64. I also wanted to say that 3.4.4 runs much smoother than erlier version on the iPad. Nice work 🙂

  65. Reading over my initial question, I am not sure I was very clear.

    I like what the demo is doing by not allowing the whole page to be scrolled vertically. On the page I have developed, if I swipe outside the scroller, then the whole page drags up or down and then snaps back.

    I am looking for the behavior that is demonstrated is the demo where swiping outside the scroller does not begin to try and scroll the whole page.

    Thanks again.

    p.s. I am guessing it is something noobish on my end.

  66. I was just wondering if I could use this (or the extension for jQtouch) and still maintain the support to hide location bar. It doesn’t seem to work. Anyone have any ideas?

    1. This is absolutely the most frequently asked question. If the objects on the page don’t exceed the page height the URL bar won’t hide. I’ll make an example on how to hide the url bar. Promised.

    2. Matteo, while you’re working on an example, can you explain it briefly, either in pseudo-code or plain English?

  67. Is there a way to always show the scrollbars? Even if the user currently is not scrolling.

  68. Ever think of the feature “snap content to bounds”? when press release, the content automatically scroll to bounds. Think it’s a pretty common req.

  69. Hi Matteo,

    I mentioned on twitter that I added disable/enable functions. I considered forking your code but this is pretty minimal stuff. Here’s what I did:

    ////// in the main function
    (function(){
    function iScroll (el, options) {
    this.disabled = false; // Added a flag for disabled

    ////// inside touchMove:
    if (this.dist > 5) {
    if(!this.disabled) { // check the flag
    this.setPosition(newX, newY);
    this.moved = true;
    }
    }

    ////// and finally, added these 2 functions to your prototype
    disable: function() {
    this.disabled = true;
    },
    enable:function() {
    this.disabled = false;
    }

    /////// you can use it like this:
    myScroll = new iScroll(‘element’);
    myScroll.disable();
    myScroll.enable();

    In my use-case I needed to scroll horizontally and when clicking an item inside the scroll area I needed it to pop out of the div and disable scrolling until you triggered it to return to its position. I’d love to show you!

    Thanks again for this wonderful script!

  70. Hey Matteo,

    For some reason after scrolling a bit down a page and then selecting a text field, the ability to edit the text does not work. The options to cut,copy,paste or select the text cannot be done.

    (iphone os4, iscroll 3.4.5)

  71. Suppose you want to add two scrollers on the same html, you just make two iScroll obj? Does this object use a lot of memory?

  72. Can you confirm that its still possible to do:

    iScroll.refresh();

    I’ve tried, but looks like you are unable to do so… as it comes back as undefined.

  73. Hi Matteo
    You’re making a great work for us.
    I’ve two questions for which I couldn’t find solution after a week playing with iScroll.
    1. I’ve noticed that when I change orientation of Iphone (3g with ios4) to landscape and back, the iScroll stops working
    2. Is there a way to have some notification from iScroll that it has been initialized to the given objects? I’ve tried to add a ‘ready’ class name to the object at the end of function iScroll (line 64), but it does’t seem to help. I would need it because after loading the page I have to set display: none to some elements for which I would like to use iScroll.

    Thanks again
    And keep up working

    1. 1. Unfortunately I cannot test on 3G+ios4, but it seems to work on every other os/device combination. 2. Why not calling your function on window load?

    2. I have an iPhone 3G with iOS4 installed and after changing orientation to landscape and back, it still works. So it’s probably a bug on your side.

  74. I have a problem. Onclick events attached to LI elements inside an iScroll-ed UL element (i.e. child elements) does not get fired on desktop. Everything’s OK on iPhone.

    1. I tried changing like 76 to the following and it seems to work pretty fine.
      if (!e._fake && isTouch) {

  75. Awesome script! But I noticed it doesn’t allow users to scroll back up the page if they happen to click on an anchor tag that jumps to another point in the document. The jump will work as normal, but if you try to scroll up, it will bounce back down again. I’m assuming it’s because when you click the anchor tag which jumps the document position, iScroll still thinks the position is zero so it doesn’t let you scroll back up (i.e. negative).

  76. A few things I’m having issues with:

    1) When I add in functions.js and style.css (version css 5.04) from iWebkit the footer doesn’t line up correctly due to conflicting styles. What is the best way around this?

    2) When using li class=”menu” (from iWebkit, again version 5.04) when I scroll, the menu item li, that is in the location where I first put my finger to start scrolling, highlights blue. This has been a problem for me in all the versions of iscroll.js that I’ve tried. Is it a known bug or something I’m doing wrong?
    Normal li class=”textarea” scroll fine without highlighting, but as soon as I add the menu class things act strange.

    1. 1) Just rename the footer ID (and related iScroll styles and JS if you use my code to resize on orientation change)

      2) I’m sorry I don’t use iWebkit, but it seems something related to iWebkit, not iScroll.

    2. Matteo,
      Thanks for the info! After a few style conflict changes I was able to get this working well with iWebKit. I still have a few tweeks to make but overall its working great. Thanks so much for all your hard work.

  77. Hi. This technique looks really nice, but it DISABLES the possibility to pinch&zoom. Is there a way to make this feature working again?

    I have been able to set up a page with scrolling features and a div – using your method – that has independent scrolling features, I can post the code if you like.

    Best,

  78. no need to set the size of the wrapper with javascript… it can be done purely with css. the setHeight function can be dropped.

    1. I tried many solutions to have a pure CSS version but couldn’t find a way to have it working on all devices, orientations and modes. If you know how, please share.

    2. $( “#wrapper” ).css( “width”, $( window ).width() );
      $( “#wrapper” ).css( “height”, $( window ).height() );
      $( window ).resize(
      function()
      {
      $( “#wrapper” ).css( “width”, $( window ).width() );
      $( “#wrapper” ).css( “height”, $( window ).height() );
      }
      );

    3. Antago, you’re using jQuery to set the width and height.
      This is the same as using javascript.
      This is no pure css solution.

    4. In one of my project, I used 100% width and height for #scroller, with #header and #footer both with absolute position, 100% width and fixed height (e.g. 40px). The scroller works as expected without setHeight().

      I even put opacity 0.9 in #header and it looks terrifc 🙂

  79. Shouldn’t “resetPosition” and the “setPosition” functions include “this.setTransitionTime(‘0’);” ? The momentum script appears to linger on in some sort of mysterious mode so that if you attempt to use your own scrolling function it becomes jerky.

    I had to call “myScroll.setTransitionTime(‘0’);” manually, when in reality it should be included in the main functions

  80. Hi Matteo,

    First off, awesome work on the script. It rocks.

    I’m having a problem using it for one of my projects. When i try and scroll the div, it scrolls (up or down) but then snaps back to the original position. The behavior is very similar to the situation where you are at the top of the scroller and try and scroll up more, and it bounces down, except this happens when i try and scroll down as well.

    Is this something you’ve seen before?

    Here’s the css for my wrapper div —

    #wrapper {
    height: 75%;
    overflow: auto;
    position: relative;
    z-index: 1;
    }

    1. I was having that SAME problem!

      I don’t know what I did to fix it, but was driving me crazy for awhile.

      My wrapper {
      position: absolute;
      top:5;
      left:5;
      right:150px;
      bottom:5;
      overflow:hidden;
      z-index:2000;
      }

      I jacked up the z-index because I thought that was the problem hahaha

    2. I had this same problem on a DIV where I was dynamically building a table. The solution was to set checkDOMChanges to “false” and call iscroll.refresh() when my code was finished building the table.

      Hope this helps.

    3. Hi Matteo,

      You are doing a great work with the scroller, keep it up !!!

      I have had the same problems than Spinlock,Troy and Mike, contrary to them I have not been able to solve the problem on my own, I am fresh to Javascript and mobile apps and have not developed any major app in the last 15 years and at the time it was assembler and C, no objects, events and all, so thanks for your understanding.

      The situation :
      When I use iScroll I can only move the scroller a little and then it bounce back to the original position.

      What do I use :
      I use iScroll in conjunction with jqtouch.

      What have I tried to address the problem :
      Pretty much everything, including typing blindly any advise from any post I have found on the subject..
      In my latest iteration I have tried to do it the jqtouch way instead of following your example because I was concerned that jqtouch event handling was competing with iscroll for the touchmove event

      My latest code :
      $(document).ready(function(){
      myScroll = new iScroll(‘scroller’,’checkDOMChanges:false’);
      $(‘#scroller’).touchmove(function(e) {
      myScroll.refresh();
      e.preventDefault();
      });
      });

      My latest wrapper:
      #wrapper {
      position:relative;
      z-index:1;
      width:100%;
      height:350px;
      overflow:scroll;

      Explanation of what I think I am doing :
      1) Use jqtouch $(document).ready to build the scroller when the document is ready.
      2)Build the scroller with the checkDOMChanges to false and refresh the scroller only when there is actually a touchmove event that actually affect it.

      Result :
      Same as with every previous attempts, I can scroll only a short distance and the scroller bounce back to initial position as soon as I release it.

      My hunch :
      I have the impression that none of the additional parameters passed to iscroll really function in my environement, I have tried to use ‘ momentum’, ‘shrinkScrollbar’, etc… and never noticed any difference in the behavior, I have also used your own simple example and tried to add this various parameters but none of them seem to modify the behavior of iScroll.

      Sorry for the length of the post and thanks again for your efforts with iScroll.
      -Raymond

    4. Thanks Matteo,

      Although the problem of with the bounce back is still there, at least the options to iscroll are now accepted, Sorry, I did not notice that they where not passed as strings…
      Will keep on testing to find out what is forcing the bounce back.

      Thanks again for your help

      Raymond

    5. The scroller “bounces back” if it is unable to get the actual wrapper or scroller size. This is 99% of the times due to a CSS or layout problem (eg: the images have no declared height/width). Try to declare iscroll on window load (instead on $().ready()) with a 100ms delay.

    6. float:left; in the stylesheet was a line that was causing mine to bounce back. Removed that and everything worked fine.

      I have another section that is bouncing back but I have yet to find a solution. Will post once discovered.

  81. Hmmm… iScroll doesn’t seem to play nice with changes to properties by way of CSS3 media queries…

  82. It doesn’t work in iPad web pages which have iFrames.

    I think it is not because of the iScroll’s bug. But it is iPad safari’s iFrame related bug.

    If web page has more than one iFrames side by side and if you want to attach iScroll in middle iFrame or right iFrame, user doesn’t get the ‘touchstart’ event.

    Anybody has similar problem with iPad Safari iFrames?

  83. Hi,
    we are using iscroll 3.0beta4 for a web app on iphone – it seems to work great, however we tried to update to the latest 3.4.5 and it breaks all of our jqtouch animations. With the latest version, the animations don’t run and it just seems to “jump” to the next page.

    1. Some more detail on this, we found that commenting out the line below would resolve the issue with jqtouch animations (of course, this would tend to break the area calculation for the scrollbar control, but this is probably resolvable in some other way):

      this.element.addEventListener(‘DOMSubtreeModified’, this, false);

    2. There’s probably some event overlapping on dom changes.

      Try the following:
      initialize iscroll with checkDOMChanges: false
      and call myScroll.refresh() after each ajax calls

  84. Seems like if a touch event is binded to a div in an iframe. The touch event within the iframe does not enforce z-indexes.

    This means that if you have a modal with higher z-index in the parent window, if you place this modal over the iframe. Visually it will look like it is over the iframe’s contents, however the touch event in the iframe is called first before the touch event in the modal.

    I’m not sure if this is a bug in mobile safari (I am using an iPad on 3.2) or iScroll but I solved it by removing the e.preventDefault() call in iScroll’s touchStart function.

  85. Hi people,

    iScroll is by far the most complete implementation of fixed header/footer with scrolling content I found on the internet. And I’ve been looking for something descent for weeks… Great work !

    I’m trying to integrate it in a GWT project with UIBinder, and I’m really having a hard time making it work. Has somebody done such thing and could provide a class or example code ?

    Thanks

    Arnaud

  86. Question: What were some of the hacks that people used for form entry inside iScroll? Did it involve binding a touchup to a focus or something?

  87. Hi Matteo,

    As mentioned by Troy and Spinlock, it seems to be a small issue in 3.4.5. _and_ dynamic content (Ajax)

    It fails to correctly scroll the whole wrapper, unless you resize if. This seems to be an invalid computation of the real size of the wrapper height.

    Can you confirm please ?
    BTW, Have nice holidays, you deserve it 🙂

    Thanks again

    1. It works in my tests, I’d need to see some demos about this behavior.

      Also try the following:
      initialize iscroll with checkDOMChanges: false
      and call myScroll.refresh() after each ajax calls.

      It’s impossible to predict all scenarios where iscroll will be used, that’s why you can trigger the check on dom changes on and off.

    2. Yeah manually calling refresh() did fix my problem with it bouncing back to the top. I called it when the view was displayed and whenever it resized.

    3. Hi Matteo,

      I just love your script and it has helped me a lot with the iPad web app I am developing at the moment.

      But, I am also having some trouble with the content bouncing when I try to scroll and, yes, there are changes to the DOM involved. 🙂

      I tried initializing iScroll with checkDOMChanges: false and then calling myScroll2.refresh() (myScroll2 is one of the scrollers with dynamic content) after the content is injected into the DOM but it doesn’t help.

      Maybe I am not using the correct syntax to specify the options but it still didn’t work after I set checkDOMChanges to false in the iscroll.js file. Can you share the proper syntax for this or do you have any other idea why it might not work.

      Thanks in advance. 🙂

    4. to everyone. If setting checkDOMChanges to false and calling refresh() once the ajax call is done doesn’t work, try to call the refresh inside a 0-setTimeout. Eg:
      setTimeout(function () { myScroll.refresh(); }, 0);

    5. Hi Matteo,

      Thank you very much for replying but the content still bounces back even after I call the refresh with: setTimeout(function () { myScroll.refresh(); }, 0);… Do you have any idea what might be the problem? I have passed the checkDOMChanges as an object, like you specified…

    6. Oh, I forgot to mention this: when I flip the iPad and the orientation changes, the content starts scrolling properly. That’s why I don’t understand why the refresh call isn’t helping… :S

    7. Another update: got it to work. 🙂 Turns out that I had to place the refresh immediately after the function that fades in the inserted content. Earlier, I had placed the refresh call after the function that inserts the content…

      Matteo, thanks again for your help, really appreciate it. And thank you for developing this awesome script. 😀

  88. Hi man, great work… I’m trying to use some anchors and have no success… Any tip?
    Thanks

    1. Amazing as always !
      I love the touch and feel, well done.

      Fun to seen we’re working on quite the same things…
      Mine is more tablets oriented. I should have something to show in 1 or two weeks, a video maybe 🙂

      Ciao

  89. I have run into this bug: If I hide either the wrapper or scroller div and then try to populate the scroller dynamically with items, the scroller will break. I need to hide and show the div in my application. Is there a way around this?

    Example:
    function initialize() {
    // iScroll
    document.addEventListener(‘touchmove’, function(e){ e.preventDefault(); });
    myScroll = new iScroll(‘scroller’);
    //hide div
    jQuery(‘#scroller’).hide();
    //
    for (var i = 0; i < 30; i++) {
    jQuery('#scroller').append("Here's a new Line! “);
    }
    //show div
    jQuery(‘#scroller’).show();
    }

    1. What do you mean by “the scroller will break”? What does it actually do? Try to add myScroll.refresh() at the end of your function. You may also try to make the scroller visibility:hidden instead of display:none (that is what $.hide() does).

  90. Please consider caching the this.element.offsetHeight/Width values in iScroll.refresh() method.

    E.g. in the beginning of the method:

    refresh: function () {
    this.scrollWidth = this.wrapper.clientWidth;
    this.scrollHeight = this.wrapper.clientHeight;

    this.offsetWidth = this.element.offsetWidth;
    this.offsetHeight = this.element.offsetHeight;

    this.maxScrollX = this.scrollWidth – this.offsetWidth;
    this.maxScrollY = this.scrollHeight – this.offsetHeight;
    // …

    And later on in the same method (and the rest of the object).

  91. Hey Matteo,

    For some reason after scrolling a bit down a page and then selecting a text field, the ability to edit the text does not work. The options to cut,copy,paste or select the text cannot be done.

    (iphone os4, iscroll 3.4.5)

  92. Why do you constantly register and unregister for MOVE_EVENT and END_EVENT events?

    Why don’t you register them on startup and set a “this.scrolling” flag in iScroll.touchStart() method? Afterwards, begin touchMove() and touchEnd() methods with:

    if (!this.scrolling) {
    return;
    }

    A general suggestion is to avoid unnecessary instructions such as:
    a) var someFlag = a > b ? true : false;
    It’s the same as:
    var someFlag = a > b;

    b) this.scrollX === true ? codeA : codeB;

    Is a bit faster if you write it like this:

    this.scrollX ? codeA : codeB;

    c) cache results of calls to DOM methods (as I’ve written before) – this will speed things up on e.g. older Androids

    Otherwise, great plugin! I’ve seen it run on iPad, it’s fantastic!

    We’ve found a bug there too: iScroll doesn’t support multiple scrollers per page – you cannot use them simultaneously, i.e. if you’re scrolling one and start the other, they start to behave awkwardly.

    1. Thanks for your suggestions. There’s a lot of code clean up needed again. The register/unregister thing comes from some tests done a long time ago (I’d say 1 year, iscroll started on iphone os v2.0). Some coding styles are there to meet a (never accomplished) JSlint compatibility.

      Regarding the multiple scrollers issue, you need to be more specific 🙂 I successfully used dozens scrollers in the same page (here’s an old test I did some time ago http://cubiq.org/dropbox/iscroll/2scrolls.html ).

    2. Tonci,

      I ran into the same behaviour, while using multiple instance of isScroll.
      Here’s what i plan to use, to avoid this.

      IMHO, there only need for one instance of iScroll, because in 99,99 % of cases, you just scroll one area at a time.
      Other gestures involving a multi-panel scroll are far beyond my needs. On the opposite, i need multi scrolling area, but one at a time.

      So, I’m working on an ‘on demand’ hook, which will change iScroll instance’s target.

      Most obvious problem I can see so far, is to keep the wrapper displacment when jumping from one arera to on other, then coming back to the first one.

      What do you all think of it ?
      Ciao,
      Jean-Philippe

  93. Sorry for my english…. i have a big problem.
    If I use an image in a div wrapper the iphone scroll correctly but when I arrive to image I cannot scroll….like a “rubber band (elastico) effect”…..
    This is the code….

    Pretty content row 1

    this is my link with problem:
    http://www.gastronomiagalanti.com/prova/

  94. Matteo, any feedback on when you might make the next release? Do you think that the fix for the form inputs, such as select box not being clickable will make it in?

  95. First of all, thanks so much for the script! I’m having a bit of trouble getting my own implementation to work though. I’m running the following inside of JQTouch. On a desktop browser I get the normal “overflow:auto” behavior except that you can just keep scrolling up or down towards infinity. On mobile Safari, I get a normal “overflow:hidden” behavior. Any ideas anyone? I’m at a loss.

    var myScroll = new iScroll(‘scroller’,{
    checkDOMChanges:true,
    bounce:true,
    momentum:true,
    desktopCompatibility:true
    });
    $(‘#scroller’).touchmove(function(e) {
    myScroll.refresh();
    e.preventDefault();
    e.stopPropagation();
    });

  96. Basically… I’m trying to get your script to play nicely with jQTouch. Any thoughts, suggestions, etc? I’ve been staring at this for days with no results so really any and all help is appreciated. Thanks in advance!

  97. Hi,Great work,Thx.But when I split my scrolling contents into columns,it bounce back to the original position after I scroll it.The following is the html code:

    Col A

    COL D

    C3R2
    C4R2
    C1R3
    C2R3

    ,when the css file looks like
    “#colstext { display: block; }
    #colstext li { display: block; padding: 0 0 5px 5px;width:74px; height:74px;}” ,
    the page works fine,but if the css file adds “float: left; ” to the li tag,which makes it looks like
    “#colstext { display: block; }
    #colstext li { float: left; display: block; padding: 0 0 5px 5px;width:74px; height:74px;}”,
    the problem accrues.Would you please tell me why?

    1. sorry,I can’t post the html code correctly,I repost it one more time with “《” replace “”
      《div id=”wrapper”》
      《ul id=”colstext”》
      《li》Col A《/li》
      《li》《/li》
      《li》《/li》
      《li》COL D《/li》
      《li》《/li》
      《li》《/li》
      《li》C3R2《/li》
      《li》C4R2《/li》
      《li》C1R3《/li》
      《li》C2R3《/li》
      《li》《/li》
      《li》《/li》
      《li》《/li》
      《li》《/li》
      《li》《/li》
      《li》《/li》
      《/ul》
      《div class=”clsit”》《/div》
      《/div》

  98. Hi, Matteo!

    One question. Why do you use “instanceof” in iScroll.refresh() method? There’s really no need for it during every refresh. You’re setting this variable either to an instance of scrollbar() or to null.

    Therefore, this should be sufficient:

    if (!that.scrollBarY) {
    that.scrollBarY = new scrollbar(…);
    }

  99. Am I the only one who experiences blur/quality reduction after viewing a iscroll page with a lot of content (height wise) on the iphone 4?

  100. I wonder if there is any way to put an iframe inside the scrolling area. I can’t use a div because I need to include a full working website (where the existing relative links work). I’d like to build the header and footer on the iphone itself (using PhoneGap) and then have a web page load in the center.

    I’ve tried various different ways and whenever I add the iframe to the page (or the scrolling div) the scrolling stops working.

    Thoughts?

  101. Awesome work, but I have one question:

    Is there a way to use iScroll on a horizontal div without removing the scroll of the entire page?

    I am trying to use it as I mentioned, and it works perfectly, but the counterpart is that I cant scroll my site vertically. 🙁

  102. Awesome, awesome, awesome script! The one problem I am still having is the one described a long time ago about the scroll region getting pushed up (thereby pushing my fixed top header offscreen) when the virtual keyboard comes on the screen .

    Has this issue ever been dealt with, or are there any workarounds to fix this?

  103. Hi there,

    LOVE your script, thanks for much! I was having an issue with the orientation change. For some reason when I switch to landscape, the window seems to stretch out and I can only see the top-left corner; refreshing it doesn’t help either. If I load the page in landscape then it works fine; I’m so confused :S lol..Any idea why that might be happening?

  104. There is a problem when the height of the content is too big. The performance greatly reduces and then all pages afterwards are displayed with lower resolution (iphone 4)

  105. At version 3.5 there are still no select boxes clickable…Does anyone know a solution for this?

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

  106. Hi Matteo, great script! I’m having one small issue though and was hoping you could help shed some light.

    It seems that once I set up an iScroll element, I lose the default behaviour for link tags on my iPad ( i.e. touching an anchor tag will show a light grey hit-area box ).

    Is there any way to get this behaviour back from within an iScroll element?

  107. Hi,
    As so many others have already said here, just great job, Matteo! I got it work right away…
    I have one question in my mind. Is it possible to scroll elements on a page both vertically and horizontally so that only those elements are scrolled vertically which are visible on the screen? Hopefully you understand what I mean? I will try this but maybe it’s better to ask first from you.

  108. Hello,

    I can’t seem to be able to use a jQuery click function with items in the footer. It’s only recognizing ontouchend events. Anyway to fix this?

  109. Matteo, nice work. I’ve now got two separate vertically scrolling regions to be happy on my page, with iScroll. I permit the user to change text size; they can can pinch elsewhere on the page, outside of these regions, to change font size. The vertical scrolling still works after a font-size change using expand-pinch.

    A feature request: it is possible to distinguish between swipe and pinch, I think, by counting the touches:

    pinching = (event.touches.length > 1);

    That is a rather crude way but it works (except for two-fingered swipes).

    Would it then be possible to invoke preventDefault in touchmove only when the user is swiping, not pinching, in the following manner?

    if (swiping==true && pinching==false) event.preventDefault();

    I think this would allow the user to change text size by pinching inside the scrolling region.

  110. Hi Matteo, that’s great!

    But, I have a problem with the script, I can’t make my list scrolling.
    I define an absolute position with defined width in my div

    this is my html :

    Lavenderx 5
    Tulipx 2
    Lilyx 1
    Rosex 3
    Lavenderx 5
    Tulipx 2
    Lilyx 1
    Rosex 3
    and css :

    .content.plants{
    display: block;
    background: transparent url(../images/bg_board.png) repeat;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
    background-color: #FDE6C2;
    -moz-border-radius-bottomright:10px; /* radius for firefox */
    -moz-border-radius-topright:10px; /* radius for firefox */
    -moz-border-radius-bottomleft:10px; /* radius for firefox */
    -webkit-border-top-right-radius:10px; /* radius for safari, chrome, etc */
    -webkit-border-bottom-right-radius:10px; /* radius for safari, chrome, etc */
    -webkit-border-bottom-left-radius:10px; /* radius for safari, chrome, etc */
    height: 210px;
    }
    .content.plants.list{
    display: block;
    background-color: #FDE6C2;
    background-image: none;
    height: 200px;
    overflow: hidden;
    }

    #for_scroll{
    overflow: hidden;
    }

    .content.plants.list li{
    margin: 10px 5px 10px 5px;
    }

    .left_span{
    margin-left:20px;
    margin-top:5px;
    float: left;
    /*display: inherit;*/
    }

    .right_span{
    margin-right:20px;
    margin-top:5px;
    float: right;
    /*display: inherit;*/
    }

    .menu.contents.item{
    background: transparent url(../images/btn_long.png) no-repeat;
    width: 213px;
    height: 25px;
    display: inline-block;
    vertical-align:top;
    cursor: pointer;
    color: white;
    font-size: 15px;
    font-weight: bold;
    }

    I’m sorry my comment got so long

  111. Ciao Matteo,

    I probably stumbled upon another “form field” problem here but, I’d like to ask you anyway. I’m quite new on developing on touch devices, so the problem could not be strictly related to iScroll… anyway: I’ve some [a]s in the iScroll area, that when clicked should show up an input form field (outside the iScroll area) and focus it. This will pop up the keyboard as well. The problem is that when I activate iScroll on some area, the field shows up but the focus is not being given to it (and the keyboard does not pop up…). Everything works fine if iScroll is not activated though. I’m on a iPad… any help would be greatly appreciated.

    1. Matteo, reading through your code, it seems everything is all right… you rightly “fake” a click and a focus on the touched element (my “a”). And my click callback is called… but for some reason, the focus() I call from inside the callback is simply not fired… I’ve tried to setTimeout the focus(), try/catch blocks… nothing 🙂

      Thank you anyway!

    2. I’ve reduced the problem at its very minimum… see http://paste2.org/p/948660 (to bypass that, I need to edit iScroll so that on “touchStart()” of A elements it will NOT preventDefault)

  112. Hm..for some reason textboxes in Android cannot be tapped and focussed on with iScroll. Has anyone had the same problem or am I doing something wrong here?

    1. I am experiencing this too. I cannot tap on text input to bring up the virtual keyboard.

      It works great in iPhone though.

  113. Hi,
    I am trying to incorporate iScroll into a GWT/Ext-GWT application. Does anybody have any hints and/or tricks that could help me?

    Basically I have a panel object which contains a treegrid component. I need to be able to have the treegrid component scroll when there is too much data. I’ve been struggling with lots of different options but can’t seem to get it.

    Can anyone offer some advice?

  114. Hi, at the moment I´m working on an webapp for ipad and iphone.
    The scrolling works really nice, but I got one problem with the html 5 video-tag.

    The video stays at its place and doesn´t scroll. The rest in the div scrolls.

    Any ideas on how to fix it.

    Greetings,

    ToM

  115. Hi Matteo,
    really great script! I was fighting quite a few hours with my scrollable divs on the iPad, before I finally found iScroll. Unfortunately, this script is just half the way to reanimate my table view in the iPad. To check it out, click on my username “netthales”. Do you guys have any suggestion, how I could translate my script to iScroll, easily?

  116. Ciao Matteo,

    You were recently tallking about iScroll happy users, and backlinking 🙂

    So, here’s my contribution to the common effort !

    This in now very preliminary alpha work, but may evolve upon my free time.

    http://kaskooye.over-blog.com/

    Kindly regards,
    Jean-Philippe

  117. Hi Matteo,

    Firstly, thanks for an excellent script. I’ve got it set up and working perfectly in Android 2.0+, but I was wondering if you could advise on a problem I’m having with Android 1.6.

    Basically, I’ve got a lot of scrollable content which takes more than one swipe to scroll from top to bottom. This is no problem in Android 2.0+, but in Android 1.6 the second touch causes issues. When trying to scroll for the second time, the scrollable content jumps back to the top, and also seems to jump to the left outside the boundaries of the wrapper.

    It’s very strange – have you any suggestions as to what I might have done wrong? Basic setup below, I’m using jQuery to update the content in the scroller div, waiting for the content to load and then refreshing the iScroll.

    Many thanks. =)

    CSS:
    #wrapper { float: left; background: url(../images/bg.png) repeat; width: 91.66%; padding: 4.17%; position: relative; z-index: 1; overflow: hidden; height: 0px; }
    #scroller { float: left; width: 100%; height: auto; }

    HTML:

     

    JS:
    function updateContent() {
    var pageHeight = screen.availHeight;
    document.getElementById(‘wrapper’).style.height = (pageHeight * 0.8) + ‘px’;
    var content = getContent(pageID);
    document.getElementById(‘scroller’).innerHTML = content;
    document.addEventListener(‘touchmove’, function(e){ e.preventDefault(); });
    myScroll = new iScroll(‘scroller’, { hScrollbar: false, vScrollbar: true, bounce: true, checkDOMChanges: false, scrollbarClass: ‘scrollbar’, fadeScrollbar: true, momentum: true, shrinkScrollbar: true, desktopCompatibility: false });
    };

    window.onload = updateContent();
    setTimeout(function () { myScroll.refresh(); }, 1000);

  118. For the love of god please someone reply with advice to my problem:

    When I scroll past the initial height of the page, I lose cut/copy/paste and selection of text in text fields on the iPhone.

    Is this supposed to happen?

  119. There is a problem with text rendering. I’m on an iPad, and the font in question is Georgia, so hinting is not the problem. I assume the Quartz rendering can’t keep up when text doesn’t fall on full pixels.

  120. I love this script. I’ve two issues though.

    The scrolling doesn’t work when using “display: -webkit-box” to automatically calculate the height of the wrapper div. This is useful because you don’t need to set the height of the scrolling div explicitly. It is calculated for you by the browser. It automatically adjusts the height in full screen mode when there is no mobile safari button bar at the bottom.

    Another issue is that I cannot scroll to the end of the content. When I try to scroll the last page it jumps back to the previous page. When I set bounce to false I cannot scroll the last page at all. Is there a work-around?

    1. regarding the -webkit-box issue there’s little I can do about it, sorry. Anyway I’d need to see your code, there’s probably some CSS problem.

    2. I’ve solved the problem.
      The problem was that the initialization was done on DOMContentLoaded. Now I do it onload. It seems that iScroll doesn’t calculate the right scrolling height when just the DOM-tree is loaded.

  121. I love the script by the way.

    However I am having trouble when I want to use the 2 different scroll areas on two separate Jquery tabs.

    The first tabs scroll area always works but when I click the tab to go to the next scroll area it does not work. In a regular browser I can see the scroll bars but on the Ipad the javascript isnt working.

    Ive tried creating two iScroll instances as shown:

    var myScroll;
    var myScroll2;

    function loaded() {

    document.addEventListener(‘touchmove’, function(e){ e.preventDefault(); }, false);

    myScroll = new iScroll(‘scroller’);
    myScroll2 = new iScroll(‘scroller2’);

    }

    document.addEventListener(‘DOMContentLoaded’, loaded, false);

    Then further down in the HTML I have two wrappers and two scrollers named differently.

    Any help would be much appreciated.

  122. That didn’t work.

    However I figured it out.

    You have to add the Jquery tab stuff in the loaded function after you declare the iScroll variables. Im not sure why but it works.

    My loaded function looks like:

    function loaded() {

    document.addEventListener(‘touchmove’, function(e){ e.preventDefault(); }, false);
    myScroll = new iScroll(‘scroller’);
    myScroll2 = new iScroll(‘scroller2’);

    $(function() {
    $(“#audioSubTab”).tabs({
    ajaxOptions: {
    error: function(xhr, status, index, anchor) {

    $(anchor.hash).html(“Couldn’t load this tab. We’ll try to fix this as soon as possible. If this wouldn’t be a demo.”);
    }
    }
    });
    });

    }

  123. iScroll is the best thing ever! Works like a charm on an iPad (though I can’t get the bounce or the momentum to work. I’m hoping to having smooth scrolls on both axis on the same page ^_^

    Cheers!

  124. I’m having an issue with multiple scrolling blocks on a single page on the iPad. is anyone else finding this problem?

    The first block behaves as expected, however additional blocks all align themselves in the top left corner as soon as iScroll loads. prior to loading they are all positioned correctly.

    1. I have the same issue. As soon as the second iscroll is created on the second div the first div(which already has iscoll on it) moves to the top left corner. I traced it to this line of code:
      that.element.style.webkitTransform = translateOpen + ‘0,0’ + translateClose;
      the funny thing is this is executed on the second block but the first one moves to the corner!!

  125. Hei Matteo!, Good job!

    btw, I have a case like this : I have some elements inside the scrolling li (list) and that elements have to be clickable .
    Before I equip with iScroll, it got clickable nicely, but after I equipped with iScroll it got unable to click.

    Would you lend me some a hand ?

    Thx, Pram

  126. Hi Matteo, it’s me again 🙂 Just wondering why you trap (and then kill) the “click” event if (!isTouch). I can’t figure out the reason and it interferes with my tests with chrome or firefox. I have to comment it out, w/o side effects (it seems).

    Thank you

    1. I’m in bug hunting session right now. I’ll be releasing a new version in a couple of hours. I’ll look into the click event thing, too. Please check back later.

  127. Hi Matteo,
    thanx for your corresponding ..
    And for Claudio’s action for this problem, it seems to be alright to commented out that code lines ..

    kind regards,
    Pram

  128. Hi Matteo,
    how I can fixe the “float” css bounces back issue?

    Best regards

  129. On an iPad, If I want to load/embed a PDF file into a div, or an iframe or as an embed tag, what is the best practice?

    I don’t know how to make an iframe scrollable with iScroll, for instance :/

  130. Does anyone know how this compares with “Pastry-Kit” library and Sencha libraries that implement this type of scrolling? I haven’t actually looked into those at all but wondering if any of you had?

  131. Hello, when developping web app for iphone, we can get rid of the search bar at the top with

    window.scrollTo(0, 1);

    But it looks like it doesn’t work with iScroll..
    any idea for that ?

    Thanks

    1. I’d need to add this to the FAQ. The page height must be higher than the visible screen for the URL bar to hide (try adding a padding-bottom to the body, you’ll see what I mean).

  132. How, yes sorry, i just get the answer by reading some message.

    In my first message i forget to thank you for the very very great work.
    Good Job Matteo, The result is amazing.
    I can get Fixed position perfect for iPhone, android + page sliding translateX + other cool features.

  133. Hi, I’m using iscroll for both iPhone and Android. It works correctly in my application on iPhone and Android 2.0-2.1, but I have a problem with Android 2.2. If I have an text input field in the scrolling area I can’t give it focus by clicking it. Is this a known problem with iscroll? If, what kind of workarounds are possible?

    /Carl

    1. I managed to fix it by using this:
      $(‘#myInput’).bind(‘touchstart’, function(e) {
      e.stopPropagation();
      });

  134. How do I get this to work with an image? I want an image in a div to be scrollable, but no matter what markup/css I use the image just bounces around. I’ve read in comments about setting explicit image heights/widths. Can you elaborate? Can you provide an example with markup and css?

  135. The latest version (3.6) is not refreshing the iscroll on dynamic changes anymore. Previous version was fine. What was changed now that it is no longer working for me?

  136. Awesome Work!
    Probably right in front of me, but I can’t find the ‘custom-scrollbar example’ you refer to in the main http://cubiq.org/iscroll page (under available options > scrollbarClass).
    Thanks!

    1. you are totally right, forgot to remove the “scrollbarClass” parameter from the docs. I had to remove it in one of the latest release.

  137. Hi, i make a web app in ASP.Net MVC, in one main page i have 4 partials(views) with 5 lists. I have 5 instances of iScroll, the scrolls work very well on Android but
    on iPhone nothing happens.

    First, how it works.
    At first i can’t make 5 instance of the iScroll so i
    make a little changes to the script:

    – Wrap the script with my object
    MobileScroll = function() {
    divId:null;
    }
    – function to initialize the script for
    current scroll
    MobileScroll.prototype.initScroll = function() {
    {isScroll script}
    }

    // how looks in action
    cutomListScroll = new MobileScroll();
    cutomListScroll.divId = $(“#wraper”);
    cutomListScroll.initScroll();
    cutomListScroll = new iScroll(“scroller”);

    workoutListScroll = new MobileScroll();
    workoutListScroll.divId = $(“#workoutsHolder”);
    workoutListScroll.initScroll();
    workoutListScroll = new iScroll(“workoutScroller”);
    …. other 3 scroll objects

    Maybe i make some mistakes or this is not right way how i do this, please for some help.

    1. why not something like:

      var myScroll = [];
      var wrappers = document.querySelectorAll('.wrapper');
      
      for (var i=0; i<wrappers.length; i++) {
      	myScroll[myScroll.length] = new iScroll(wrappers[i], ...);
      }
      

      of course the wrappers must have class “wrappers”.

  138. I seem to have an issue with the keyboard not showing up when clicking on an input box that is nested in a table. If I pull the input out it works fine. This is an issue with a droid x. It works fine on my iPhone 3GS. Any ideas???

    Thanks

  139. I seem to not being able to click on an iOS 2 device. It seems like that.moved gets value true all the time, and preventing clicks.

    In function touchStart, there is this code:

    1 – // Check if the scroller is really where it should be
    2 – if (that.options.momentum || that.options.snap) {
    3 – matrix = new WebKitCSSMatrix(window.getComputedStyle(that.element).webkitTransform);
    4 – if (matrix.e != that.x || matrix.f != that.y) {
    5 – document.removeEventListener(‘webkitTransitionEnd’, that, false);
    6 – that.setPosition(matrix.e, matrix.f);
    7 – that.moved = true;
    8 – }
    9 – }

    Inserting an alert between line #3 and #4:

    alert(matrix.e+’ , ‘+matrix.f+’n’+that.x+’ , ‘+that.y+’n’+window.getComputedStyle(that.element).webkitTransform);

    This gives the following alertbox on iOS2:

    undefined, undefined
    0, 0
    matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

    … and this on iOS3:

    0, 0
    0, 0
    matrix(1, 0, 0, 1, 0, 0)

    1. iOS2… wow this is ancient 🙂 Don’t have a 2.x device at hand to test with. Try to send me the result of:

      for (var i in matrix) {
       console.log(i + ': ' + matrix[i]);
      }
    2. Yeah, I know. I just want to support it too, so I always keep my old 1st gen iPod Touch without upgrading it.

      Result (first value i output is if unscrolled, second is if scrolled 72px horizontally (swipe left).

      m13: 0 , 0
      m12: 0 , 0
      m11: 1 , 1
      m42: 0 , 0
      m41: 0 , -72
      m23: 0 , 0
      m24: 0 , 0
      m31: 0 , 0
      m32: 0 , 0
      m43: 0 , 0
      m21: 0 , 0
      m14: 0 , 0
      m22: 1 , 1
      m34: 0 , 0
      m33: 0 , 1
      m44: 0 , 1

      The rest of the elements inside are native functions: scale(), rotate(), translate(), rotateAxisAngle(), inverse(), multiply(), setMatrixValue() and toString()

      So it seems like m41 contains the x value. My iScroll only scrolls horizontally, but I will adjust and come back with what attribute is active for the y value as well.

    3. Scrolling 72 pixels horizontally instead (swipe upwards), changes m42 to value -72, other values unchanged.

      The exact same applies to iOS 4, and iPad with iOS 3.2, by the way. Haven’t had time to test these values on an Android device yet.

  140. Snap option is active, wrapper div`s width is 300%,
    and inner div`s width is 100% (three divs).
    in this situation, I set all inner div`s height in varying each other.

    First inner div has 2 pages (as a result of snap option)
    and second inner div has 1 page,
    When I scrolling page 2 and swiping right, (toward second div)
    Just displaying empty background..

    I want displaying second`s page 1 correctly, when I swiping toward structural empty place

  141. Hi Matteo,

    I’m trying to figure out how to use this script for an iPad app, but can’t get it to work. Even when I try your own examples (accessing them from the iPad browser) they don’t work and the console shows no errors. When I change the device to iPhone it works flawlessly.

    Any ideas?

  142. Has anyone done already work towards implementing something like the iPhone’s “selectionStyle” with iScroll? e.g., a background color change when a row in a list is tapped, but that won’t be triggered right away on touchstart, so that it doesn’t appear when just scrolling? I’ve started work on it, but it seems likely that someone would have solved this already…

  143. Is the scrollto function not available when using the carousel iscroll? I’ve tried everything to get it to scrollto a new section using carousel but I get nothing, it always stays on the first “frame”.
    Help –

  144. Hi Matteo,

    Im using iScroll along with jQtouch. They seem to get along nice, but the navigation buttons (from the snap function) sometimes are reseted after a jQtouch animation, like a page transition.

    Im curently trying to use this to fix:
    [code]
    $(function(){
    $(‘body > #home’).bind(‘pageAnimationEnd’, function(){
    setTimeout(function () { myScroll.refresh(); }, 0);
    });
    });
    [/code]
    But with no success. Any ideas?

  145. Matteo,
    If I can get the scrollto function to work with carousel I will donate to your account.
    Look above please, I really need this to work.

    1. Use myScroll.scrollToPage(“X”, 0) to scroll carousel pages, where X is the page number.

    2. you cannot scroll freely if you activate snap scroll. You can use scrollToPage, though (and probably scrollToElement, too). scrollTo is for free scrolling, and with snap you can just scroll to fixed positions

  146. I tried that, keeping a running list of then myScrollToPage(,0> but it’s not working.
    Do I have to keep a running “page” count as well?

  147. I found the issue. I wasn’t counting pages when I put the records in a list. Once I added a simple count, I can return to that page by doing as the above mentions ScrolltoPage(“X”,0).

    Thanks!

  148. I have two very interesting examples. open them on iPhone and computer to compare
    1) first example with iScroll http://beside.ru/a/
    a) When sum height of items less than scrollable area them initial position at bottom
    b) Double clicking on scrollable items for zoom doesn’t work

    2) without and with iScroll http://beside.ru/a/2.html
    something about onmousedown and onmouseup event. Them work on Iphone without iScroll

    1. Thanks, iScroll doesn’t need any more. It blocks all standard safari events.
      works example beside.ru/a/3.html

  149. The comments are growing… if its not a huge inconvenience I recommend you open a Forum or Google Group etc and direct people to that if they run into problems.

    That might make it easier to highlight common problems/solutions/workarounds.

    Just a thought.

    1. You are totally right Michael. I’ll certainly do it. What do you think guys, would you make it specific to iScroll or generic to all my scripts?

  150. I think I have found a solution to the select box not working on iPad when in an iScroll panel. I have tested this on my iPad tonight and it works great in my particular situation. Check it out:

    http://gist.github.com/573036

    If you run this on your iPad with the proper HTML setup you should be able to click a select element inside the iScroll, change the value (which will be alerted by the change handler) and then continue scrolling the panel afterwards as normal.

    Matteo, do you see any problems with this approach as it relates to creating / destroying the iScroll?

    1. A bit drastic as a solution, but nice find. We could better completely disable/enable it. Have to make some checks on iphone and android too.

    2. Matteo,

      Agreed there is probably a better approach. I’ll take a look at the code sometime if I get a spare minute.

      In the meantime I wanted to get this out there now for those people who can make use of something today to get around the issue in the meantime while a better longer-term fix is researched.

  151. HTML

    <div id=”content” style=”position:absolute; top:0; left:0; height:100; width:100%; overflow:auto;”>

    <table border=”0″ cellpadding=”2″ cellspacing=”2″ width=”100%”>
    <tr>
    <td id=”MyEvents” width=”50%” valign=”top”>
    </td>
    <td id=”MyAddressBook” width=”50%” valign=”top”>
    </td>
    </tr>
    </table>

    </div>

    RESULT OF AJAX CALL

    <div id=”myEvents” style=”position:relative; height:500; overflow:auto; overflow-x:hidden;”>
    <table border=”0″ cellpadding=”2″ cellspacing=”2″ width=”100%”>
    <tr id=”hdr_model” class=”tableheader”>
    <td>Type</td>
    <td>Subject</td>
    <td nowrap>Start Time</td>
    <td>Duration</td>
    <td>Status</td>
    <td>Actions</td>
    </tr>
    .
    . A bunch of rows that need to be scrollable.
    .
    </table>
    </div>

  152. Hi Matteo.

    I’m using your script and I had problems when mixing it with other things I’m using.

    I had to remove the stopPropagation() on touchStart: why did you include it?
    I also removed the behavior which creates a click event on touchEnd. Maybe an option to disable it would be great? For me, it’s not your job to prevent the 300 ms delay that exists on the iOS click event.

    Cheers,
    Savageman.

    1. Ow… I’m using version 3.5.1.
      I see that you removed the stopPropagation() on the touchStart in version 3.6, that’s cool.
      The 3.6 has a regression for what you call slingshot effect I think (at the end of the momentum, when snapping at the top or the bottom of the scroll area), which is why I’m using 3.5.1.

  153. Is there a method of preventing or removing iScroll functionality from a single page within an app? For example, you have an app with 5 pages, but you don’t want iScroll on page 3.

    1. From what I know, you must explicitly initialize iScroll for each scrolling area. So if you don’t do it for one of the page, it won’t be here.
      I also saw an “active” property inside iScroll, but I don’t know how it works.

  154. OK, let me ask a different question.

    First of all, I really like the library. Very well done.

    I have a web site that has been used by desktop for years and I am trying to make it compatible with iPads. So your library is very beneficial. However, I have had to build functions that will create the necessary “environment” is the browser OS detected is iPad. When I originally implements iscroll, it broke my desktop functionality.

    This is almost working perfect except that I am getting the slingshot effect on all my iscoll instances. What css settings do I need to adjust to prevent this from happening?

    Thanks in advance for the help.

    1. I posted the page to this public url. In this example, the left list displays the correct behavior however, the right one has the slingshot effect. The two classes are in the dqimp.css file at the very bottom. I have included them in this post as well.

      Again, thank you for your help. I really like this library and want to be able to use it.

      http://www.paragonis.com/ipad/index.htm

      <style>

      .ipad_wrapper {
      position:relative; /* On older OS versions “position” and “z-index” must be defined (absolute | relative), */
      z-index:1; /* it seems that recent webkit is less picky and works anyway. */
      width:100%;
      overflow:hidden;
      }

      .ipad_scroller {
      -webkit-tap-highlight-color:rgba(0,0,0,0);
      }

      </style>

  155. Feature Request:

    Could you include a option for a 1px border around the Scrollbar or let us choose the Scrollbar color? It gets lost with a dark background color.

    Thanks,

  156. Hello Matteo

    there is a question that I want to ask you.
    is there any iScroll freeze function in this library ?
    if I use destroy to freeze the iScroll , I had to create new Instant of iScroll when I want to unfreeze the iScroll.

    I’ll appreciate your answer .
    Thanx, pram

  157. Hi,

    First, thanks a lot for sharing your work with the community.

    I wanted to ask is there any possibility that applying iScroll on an element will keep the default desktop browser mouse wheel support (given that #wrapper has overflow:auto)? Is that a fundamental problem preventing that, or you just never considered that?

    Right now I need to run something like:
    if (document.createTouch) x.iScroll = new iScroll(…);
    otherwise the mouse wheel is not working.

  158. When using the carousel iscroll, I find that when the parameter of the #scroller is set longer than around 30,000px I get an odd wrapping affect. How can I counter this?

  159. Hello Matteo
    Thanx for your reply

    maybe my case is a little bit unique,
    I want to freeze the iScroll, but I don’t want to disable the”Click” event of element on it ..
    I’ve tried your solution, and as the result it disabled all event even the “Click” event.
    Hmm.. maybe I have to use destroy function for a while.

  160. Per my previous post and your reply, I posted the page to this public url. In this example, the left list displays the correct behavior however, the right one has the slingshot effect. The two classes are in the dqimp.css file at the very bottom. I have included them in this post as well.

    Again, thank you for your help. I really like this library and want to be able to use it.

    http://www.paragonis.com/ipad/index.htm

    <style>

    .ipad_wrapper {
    position:relative; /* On older OS versions “position” and “z-index” must be defined (absolute | relative), */
    z-index:1; /* it seems that recent webkit is less picky and works anyway. */
    width:100%;
    overflow:hidden;
    }

    .ipad_scroller {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    }

    </style>

    1. I am sorry. That page works just like it is supposed to. I cannot reproduce my behavior outside of my development environment. Everything works except the slingshot. Is there nothing I can do to troubleshoot this? I know it is a css problem but what property associated with which div should I be messing with to attempt to fix the problem? In the wrapper class? the scroller class? the width? overflow? what?

      Please help. Thank you.

    2. The code is a bit messy, I’d have to scroll through all of your code, and I’m a bit out of time at the moment. The bottom line is the iScroll is getting the wrong #myEvents height. To make a quick test, just try to set a fixed (very high) height, if it works you have to find the elements inside the scroller that do not get correctly rendered. It’s 100% a css issue (often float left elements together with block elements cause this kind of problems).

    3. OK, I had this working then I tried cleaning up the code. And back to my problem again. You suggested setting the height to a fixed (very high) height. Which div, the wrapper or the scroller div?

      I do believe this is a css problem like you said. But I think the bigger problem is a timing issue. I think I am setting the heights (again, via DOM manulation) too late. I am trying to set them before I instantiate the iscroll object but it looks to me like the height is not being adjusted right then but maybe later after some other “thing” has finished and I am instantiating iscroll too soon.

      Any thoughts?

  161. I have noticed that if I use the JS alert() or prompt() functions that iScroll breaks, and now I can’t scroll anything. Further testing in Safari shows that after the alert() or prompt(), scrollbars appear. ANy ideas on how to stop this?

    Alex Zylka

  162. Thank you so much for making this available. Very much needed. I’m having an issue with assigning iScroll to a dynamic element. It seems like the element needs to exist at the time that the document loads. Is there a way around this? Also, I saw that you said in your revisions that you had implemented a multiple scroller mechanism. Can I help you to create demos of this, perhaps? I did not see any. Thanks,

    Kevin

    1. I did find a fix; but a less-than-desirable one. You can initiate a Div (mine was named “stupid”) with an iScroll object that is not used. Then, when you’re ready for the one you want to use, just add an iScroll object assigned to the dynamic wrapper Div. It would be nice if there were another way to do this, but at least it works.

      1. I probably didn’t understand what you are trying to do… 🙂 You can create the iscroll obj in any moment, just remember to refresh() if you change the content inside of the scrolling area.

  163. This really isn’t a bug, just an observation and a “huh?”

    Open the iScroll demo page in Safari and change the user agent string to Mobile Safari – iPhone 4.0.2.

    You can’t scroll!

    Changing the setting back to Automatic restores iScroll. Weird, eh?

  164. Hi,

    I use the latest iScroll and have a problem that it freezes after a while of scrolling. It happens on HTC Desire with Android 2.2.

    It works correctly in the simulator on 2.0-2.2. And it also works correctly on my Nexus One with 2.2. And on my iPhone as well.
    I’ve tried it on 3 different Desires and all of them freeze after a bit of scrolling. You have any ideas what can cause this?

    The html inside the scrolling area is a form with inputs and a ul-list.

    Best regards
    Carl

    1. maybe the device went out of memory. Do you have many elements in the page? Otherwise I would try to remove the elements one by one until you find the culprit.

    2. Thanks for your fast reply!

      Not very many. Perhaps 50 elements in total.

      As I don’t own a Desire personally the feedback loop is quite long. But I will try your suggestion of removing elements one item at a time.

      I tried the simulator once more and set the ram to 200MB, the Desire have I think 512MB. But it still worked as expected.

    3. I’ve know tried with only a ul-list containing one item and it still freezes.

      You can download “Matdagbok” from Market, it’s a Swedish app but I’ll guide you:
      1. Press “Ja”
      2. Enter “matteo” in both fields (användarnamn/lösenord)
      3. Press “Lägg till”
      4. Enter “potatismos” and press “Sök”
      5. Try to scroll the list up and down a couple of times
      6. The app freezes.

  165. Hi,

    Thanks for this script, really awsome !

    PS : If you are interested, I think I did the JSLint compatibility (which were a good thing to do before releasing any newer version).

  166. Hi Matteo,

    I had tried your incredible iScroll, but I got little problem when it just have a one page to scroll (I meant it have to be unscrollable ), I’ve been trace it all day long, but I don’t get it why this one page can be scroll.

  167. Hi,
    thanks for this great script, so helpful. I’m a bit familiar with basic CSS skills because i’m more a designer trying to code 🙂 and i was wondering if you can help me on a thing, I try to have a scrollable content into the footer but it’s a bit difficult.
    I don’t know if you have an ipad but
    here is an example of what i’m trying to do : http://prart03.free.fr/test/examples/ipad/about

    I can scroll horizontally in the middle part I’ve tried to do the same on the footer but in vain.

    I don’t know if it’s the place to ask this, but if you can help me or tell me if there’s a forum where I can post my question.

    Thanks!

  168. Does anyone have an insight as to the iscroll limit when using carousel? After 30,000 pixels wide there is an odd wrapping effect and the first frame will contain information from the last few frames, etc.. When I stay below 30,000px wide (which is effectively 93+/- screens) it does this. I’m only displaying text in the scroll frames.
    Anyone?

  169. Excellent script, you won’t find a better alternative.

    Being able to fire ontouchstart outside the iScroll element can be confusing though. Because the whole page including header+footer could still be placed off screen now.
    Shouldn’t ‘fixed’ elements return preventDefault?

    1. You can remove the preventDefault in the document touchmove event, but you’ll see the page scrolling when dragging outside the iscroll area.

  170. I made a simple modification to your library to change the behavior to lock the scrolling if the scroll motion was close to horizontal or vertical. This more closely mimics how the iPhone behaves, and allows you to vertically (or horizontally) scroll and have the action locked vertical (or horiziontal). If you start your scroll at an angle the action isn’t locked and you continue to have a free directional scroll as usual.

    to do this make the following mods:
    line 37: add a trailing comma
    line 38: smartLock: true
    line 281: Add the following, inside if (that.dist > 5) {

    if (!that.moved && that.options.smartLock) {
    // Set the smart lock sector
    that.smartLockSector = -1;
    if (Math.abs(leftDelta) < 2 && topDelta < -3) {
    that.smartLockSector = 1;
    } else if (Math.abs(topDelta) 3) {
    that.smartLockSector = 2;
    } else if (Math.abs(leftDelta) 3) {
    that.smartLockSector = 3;
    } else if (Math.abs(topDelta) < 2 && leftDelta < -3) {
    that.smartLockSector = 4;
    }
    }
    // Apply the smartlock if needed
    if (that.smartLockSector == 1 || that.smartLockSector == 3) {
    newX = that.x;
    leftDelta = 0;
    } else if (that.smartLockSector == 2 || that.smartLockSector == 4) {
    newY = that.y;
    topDelta = 0;
    }

    1. Thanks for adding this solution. I’m actually looking to get the same effect. I want to allow the user to still swipe vertically on top of the horizontal iscroll area and be able to move the page. I noticed that the Yahoo Mobile site does this really well… I tried cutting and pasting your script into my iscroll.js (line #281) and it throws several errors… what am I missing?

      if (that.dist > 5) {			// 5 pixels threshold is needed on Android, but also on iPhone looks more natural
      			if (!that.moved && that.options.smartLock) {
      			// Set the smart lock sector
      			that.smartLockSector = -1;
      			if (Math.abs(leftDelta) < 2 && topDelta < -3) {
      			that.smartLockSector = 1;
      			} else if (Math.abs(topDelta) 3) {
      			that.smartLockSector = 2;
      			} else if (Math.abs(leftDelta) 3) {
      			that.smartLockSector = 3;
      			} else if (Math.abs(topDelta) < 2 && leftDelta  0 ? -1 : 1;
      			that.directionY = topDelta > 0 ? -1 : 1;
      		} else {
      			that.dist+= Math.abs(leftDelta) + Math.abs(topDelta);
      		}
      	},
    2. Sorry for the repeat, but it didn’t post my entire comment, here is the code that I have from lines 280 – 310.

      if (that.dist > 5) {			// 5 pixels threshold is needed on Android, but also on iPhone looks more natural
      			if (!that.moved && that.options.smartLock) {
      			// Set the smart lock sector
      			that.smartLockSector = -1;
      			if (Math.abs(leftDelta) < 2 && topDelta < -3) {
      			that.smartLockSector = 1;
      			} else if (Math.abs(topDelta) 3) {
      			that.smartLockSector = 2;
      			} else if (Math.abs(leftDelta) 3) {
      			that.smartLockSector = 3;
      			} else if (Math.abs(topDelta) < 2 && leftDelta  0 ? -1 : 1;
      			that.directionY = topDelta > 0 ? -1 : 1;
      		} else {
      			that.dist+= Math.abs(leftDelta) + Math.abs(topDelta);
      		}
      	}
    3. Oh how frustrating, it won’t post the entire code when I post. Anyways, did anyone else have any luck with using Nico’s solution?

    4. Okay I just answered my own question, it was very simple. Just comment out line 217: e.preventDefault();
      This is in the touchStart event

  171. Is there a way to customize the scrollbar indicators? In particular, can the color be changed? Or set to always be visible?

    Would it be better to create a custom scrollbar whose position is changed in a myScroll.onScrollEnd function?

    1. I’m trying to add a border to the scrollbar. Changing color is really simple. Making it completely customizable is not easy due to the way iscrolI handles it. (Remember that iscroll always gives priority to speed and resource saving over features)

  172. Congrats on that really impressive script. I’m developing a webapp with jQtouch and iScroll has really been a great help for that. I just encountered a serious problem – in the moment I activate iScroll the -menus won’t work anymore – the layer containing the contents of the select just won’t open anymore. Any ideas on that?
    Best regards, thomic

  173. Is it possible so that the script loads the content from the bottom rather than from the top? Also so that its always being refreshed from the bottom?

  174. Your library works great, but i am running into a problem. content inside scroller works accordingly, but i want to use an iframe inside scroller and load external pages in iframe. When i put iframe inside scroller iScroll stops working, will IScroll work with iframe ?

  175. How would you recommend I mix iScrollers?

    For example, imagine I start with a horizontally paged iScroll (like your carousel example), but one of the individual pages contains content that is too large to fit in the window area. I’d like to be able to vertically scroll (non-paged) that overly large content.

    If I just add an additional iScroll to that individual page, the touch events override the larger existing iScroll (as would be expected). Do you know of a way to allow these to coexist (pass vertical swipes to 1 iScroll, but horizontal swipes to another)?

  176. This maybe a silly question, but how can i use iScroll to allow for purely horizontal content? Any help would be appreciated.

  177. Thanks for this great script. But i have problem. If scroll div don’t have a listbox( ) everything is ok, but when i add a listbox into you example, i can not touch to open list (option) in my iphone. Touch to that listbox and nothing happened.

  178. Is it my imagination, or was there an optional property “scrollbarClass”, and if it was it removed, why?

  179. Hey Matteo, i have some problems with my project, it doesn’t scroll as it must scroll ;S If i drag the scroller down, and release, it goes back in it’s original position. Which is not what i want. It must stay to where i drag it. This is not-normal behavior but i cannot find the bug.

    Click on the first white button to see the effect, then you get a list that’s longer then the screen for test. http://devcube.nl/rooster/webapp/

    1. Allright i already solved it, the problem was that de #scroller hadn’t enough height, is had to set it to the content’s height with javascript.

  180. Pingback: AdMob et jQTouch
  181. Hello! I am now using your script. It’s perfect! But I have one question. How can I make a full direction iscroll? Maybe you can give me some hints. Thanks a lot!

    1. I can’t paste the code.
      I try to tell you what I want.
      -wrapper- //this goes Y
      -scroll-
      -ul-
      -li-
      -li-
      -li-
      -wrapper1- //this goes X
      -scroll1-
      -ul-
      -li-
      -li-
      -li-
      -li-
      -li-
      -li-

      Wish you could understand what I mean.

    2. Sigh, still doesn’t work.
      I want to insert a Xscroll into a Yscroll.
      A vertical list include a horizontal list.
      Thank god! Hope you could know what I am saying!

    3. Well, I forgot one thing, I hope that the “wrapper” scroll vertical when I touch “wrapper1” from top to bottom, the “wrapper1” scroll horizontal when I touch “wrapper1” from left to right.

  182. Hi there

    I am just wondering if there is anyway to do continous scrolling with the iscroll plugin? So basically when I drag it doesn’t stop at the end of the content, it will carry on and start again from the beginning. I cant see it in any of the functions.

    Thanks,

    Sat Bulsara

  183. Ahhh! Thats a shame, never mind it would be an awesome feature, if you ever figure how

  184. Pingback: IOS scroll « 80
  185. Hi,
    when i use iscroll with jqtouch,
    i can use ontouchend=”jQT.goTo(‘#NextPage’,’reveal’)”

    but i can use
    only in one page…

    how can i use iscroll (wrapper+scroller) in all my jQT pages (divs)?

    thanks!

  186. Hi, I am pretty a programmer and use this library first time. I tried to modified the iPad example, just change items to img () ,
    I found that the scroll “bounce back” , how to solve this?

    thanks,

    Cliff

  187. I recently wrote my own version of this same functinality, but with Prototype for a hybrid iPad native app. I thought I’d review your code to see the difference. Looks good, but I did catch one thing you will want to change:

    detecting iDevices should include ipods:
    iphone|ipad|ipod

  188. I’ve used iScroll now for several projects and I love it. I now need to scroll a pane right to left, but it doesn’t seem to allow this. The header and footer can remain top and bottom, but I need the middle pane to scroll right and left smoothly. Any help appreciated.

  189. I need to use this within an iFrame, but it acts weird when loaded into another page through an iframe. is there any code I can add to make sure it continues to work properly?

  190. I’m using your “carousel” sample, but when I insert a video tag within one of the li tags, (ex: ), the scrolling stops as soon as I get to that portion. The scrolling does work with with an image, but not with video. I’m using all code in the sample, I haven’t changed anything. Do I need to write some custom javascript maybe? Or is scrolling with video just not allowed? Thanks!

    1. If you’re using the default controls for the video embed, you won’t be able to swipe on the video to scroll through the carousel. Your touch events will be used for the video controls (pinch/zoom) instead. If you’re scrolling area is larger then the video you can swipe above or below it to scroll to the next section. You would have to create custom controls for the video if you want to swipe on top of the video to scroll. However, you will loose the default pinch/zoom feature to make the video go full screen.

  191. just tried the demo page in the Android sdk emulator … looks like it works … so i guess it would probably work on an an Android phone too?

  192. Awesome project. One thing I’ve noticed on the simulator (haven’t tried on the actual iphone yet) is that scrolling up will trigger the browser (including the navbar) to bounce (unless scrolling very slowly). Is this an issue using the actual iphone, or simply a simulator side-effect I am seeing?

  193. Hi Matteo,
    I have some problems with your script.
    I want to create 2pages with a list of items, the pages are next to each-other, and i have a script that detects a swipe(left or right) gesture which lets the 2pages animate to left or to right to show the next/previous page. This works fine.
    But now i want to create a scrollable list in each page.
    So i have 2 iscroll objects for each page 1.
    But now my swipe script doesn’t work anymore?
    Can you please help me by saying how to add swipe detection on container where the pages are in. While still being abled to use iscroll too? 🙂

  194. Amazing script, but using it disables font smoothing. Really looking forward to a fix for that.

  195. Doesn’t safari support 2 finger scroll of an absolutely positioned div. I admit I prefer context sensitive 1 finger scrolling as you’ve done but isn’t this possible with some event mapping magic instead of all this CSS stuff?

  196. i add iScroll to my project based on webapp.net. they works great together but it left me one problem, webapp.net manage layers with position:absolute; to keep them at the same position and make horizontal transition well, and when i scroll, iScroll always come back to initial position when i release touch, i can’t go down 🙁 is there an option to avoid this ?

  197. how to use the spinning wheel with iscroll so that with an onclick event the rows in the spinning wheel app should be shuffled

  198. Hi there!

    It’s fantastic. It works even better than a new update of gmail.com for iPhones.

    And I’m happy to see that it works on Samsung Bada as well 🙂

    I tried your Live demo and it worked fine but with a small remark (I dunno maybe it’s a Bada issue not your one at all) – the list does not scroll smoothly. it rather twitches while scrolling.

  199. Really great script!! Using it over & over for iPad development. I would like to request an option for the direction lock. In many cases I actually need to turn it off, so I added the option myself. Since it is such a simple, but useful change, I thought it might come handy for others too. Now I just have to figure out, how o make it behave nicely with gestures for pinch…

    Thanks again for your awesome work!

  200. First, this is great stuff! Thanks for developing/maintaining this – really useful!

    I have used it on one page and things work fine. However now I am thinking of using it across the app, but I have come across the issue with input fields not working with iScroll, which is a showstopper 🙁 Any info on when that’s likely to be fixed?

  201. Is there a way to use it for infinite scroll? (something that will load additional elements when we reach the end of scrool?)
    I’ve got troubles implementing this and it looks like it won’t work without hacking iscroll internals.

    1. I need this stuff to!

      Is there and onBounce event or somehting like that?

  202. This really is a wonderful library but I am really doing a great job of breaking it. I think I finally understand the DOM side of it and how to properly set widths and height and which divs to set them on.

    Now I have a much different issue involving the CSS and webkit.

    I have a main page that has four quadrants (a div in each) with an iscroll in each one of them. They work perfectly.

    On this page is also a hidden iframe. If a user clicks a link, the iframe is displayed and a new table is built within it that also implements the iscroll library and it works great.

    Here is the problem, when I do a css display:none on that iframe, all the 4 underlying divs dissable.

    I have narrowed the culprit (after many hours of debugging) to be the z-factor in your translateClose variable. It pushes the iscroll divs behind everything. I have tried to google the functionality but have never dealt with the webkit before so this is very foreign to me. If I change the z-value in the translateClose to 1, they do not disappear when I close the iframe but the scroll no longer works.

    Can you give me some insight on how to fix this?

    1. Some further explanation….

      The structure of each quadrant is <div><div class=”scroller”></div></div>

      The div of class scroller is the one I instantiate iscroll on.

      Also, in the iframe, is use the iframe.style.display = “none” to hide it. When I hide it, that is when the underlying iscroll elements disappear, not disable as I stated above.

      These scroller div appears to be pushed behind the outer div which is why it disappear, but this only happens after the iframe is hidden. I cannot find any documentation that explains where the webkitTransform actually occurs or if it even needs to. Or are you forcing it programmatically somewhere in the code?

      Thanks for the help you can provide.

    2. That did not solve the problem. Let me ask a very simple question. If I set the translateClose value to …

      has3d ? ‘,1)’ : ‘)’,

      all of my disappearing content is solved but the scroll no longer works. The little scroll indicator appears but the list does not move. What else do I need to change to make the scroll work if I make the change indicated above?

      Thanks again for the help.

  203. I tried iScroll when there only one neted DIV under the wrapper and scroller. I have new scenarios.

    I have nesed 2 DIV tags under the wrapper and scroller. WHen I use this and test it in iPhone. The page literally freezes. I cannot scroll anymore. Any help is appreciated.

    Here is the sample structure

    [SNIP]

    Note by Matteo: Please use the google group.

  204. Hi,

    i have an issue with iScroll.
    When i launch my Webapp (Portrait-Mode) the scroll content is not working. After, if i rotate the iPhone in Landscape-Mode and switch it back to Portrait-Mode everything works fine.

    I do not know where is the problem and how can i fix the problem.

    Thanks for the help.

    1. I also have this problem. Can anyone provide fix for this issue?
      I really need iScroll because default scroller not available in my case (I have two fixed iframes and one have div, initialed with iScroll). On mobile devices default scroller not available in my case.

    2. The same here … I cannot figure out the problem, I tried the checkDOMchanges but it doesnt help …

  205. I ended up not needing this script. If you have a div that scrolls on your site, just set the overflow to visible for ipad/iphone and then you can scroll with the native swipe action…. here’s the code if you’re using jquery:

    $(document).ready(function() {
    //iphone and ipad scroll
    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) $(“#divthatscrolls”).css(“overflow”,”visible”);
    });

    1. Hey Morgan, do you have an example/demo where we can see this in action?

      Thanks! I’d be most appreciative. I’m trying to get my iPhone tab bar to work properly.

      p.s. Matteo–thanks for posting this and keeping the conversation going!

  206. How can I hide the URL bar for iPhone? Typically I would just write:

    window.scrollTo(0,1);

    but that doesn’t work once I’ve implemented iScroll. my demo is setup very similar to yours in regards to markup.

    Any suggestions would be great. Thanks for the awesome code, I’ll be sure to send you my implementation when it’s complete.

  207. Considering how Sencha has made their scrollview functionality work well with Android, are you considering porting what they’ve done to iScroll?

    Thanks for this project!

  208. Matteo, thanks for sharing this. Looks like it could be very useful.

    I’m getting some weird behavior when viewing the live demo on Android – namely, the bottom buttons are only about 25% visible (they fall “below the fold”, and are sticky there obviously, so I can’t use them). Additionally, if I turn to landscape mode they are fully hidden. However, if I move back to portrait the window screen is then very small.

    This is all on a nexus one. Have you seen this behavior before?

    1. the problem here is in the way Android 2.2 handles orientationchange. Not a hard fix, though. I’m working on it. We have just to be a bit more aggressive when refreshing the iScroll dimensions (putting refresh() inside a setTimeout for example). Generally speaking android seems to work better with onsize than with onorientationchange.

  209. Hi, I’m trying to use your script for a calendar function on our website. I’m really really new, so I’m really sorry if this is really newbie.. but is there any way for the script to snap to a list item, when scrolling? (a preview of the page is up on http://sodasoda.net/test/cal )

    Thanks,

  210. Nice script, work well.

    I just notice a issue when using ajax and loading remote content : after DOM changed, some element size can change without any event. I got the problem with remote image which need time to load. this result in a wrong offsetHeight i was not able to detect (wait 2sec is not a good solution).
    The only way i found was to force a refresh into the touchStart function and set checkDOMChanges false to save cpu.
    This work well, refresh is not called to much and i am sure that the offsetHeight is correct.

  211. Ciao Matteo, great job.
    I love it. I’d really like to use it for my next website but I was wondering If you have any thought on including a detection routine for FF and IE so that the script automatically apply the full power to Chrome and Safari Desktop & Mobile, and the other browser they can use jquery or other minified framework…
    I know I can do ti by myself (in fact is what i’m trying to do) but the other people, and in order to streamline the code what i’m saying is that would be great to have finally a carousel script that works EVERYWHERE. thanks!

  212. I hate to even ask, but is there any chance of making the desktopCompatibility mode work in IE9? Are the necessary events/properties still webkit-only?

    1. FWIW, I’ve looked into this, and it can be barely made to work in IE9 Platform Preview 7 (thanks to the addition of support for msTransform), but I guess the lack of transition support means that there’s no momentum or bounce. Perhaps those features could be built using alternate means, or perhaps MS will get around to supporting them.

  213. Is there some demopage of the Snap scroll as it looks in the screencast? Just what I have been looking for, great!

  214. Unfortunately this script won’t work proper after the iPad update 4.2.1. The scroller-div keeps blank.

  215. Couple of things:

    1. You are my hero

    2. Anything to keep me from learning Ruby and Sproutcore to accomplish something as simple as scrolling a DIV with one finger makes me love you just that much more.

    3. I can’t thank you enough!

    4. Once I transfer some funds to PayPal, I am donating some money to this.

    BRAVO! YOU ROCK!

    1. One problem tho….

      This doesn’t handle horizontal scrolling??!

      Please tell me I can get this to work horizontally….let me know thanks!

  216. Hi Matteo, I’m developing a mobile site using iScroll and found an issue on Android 2.2 (tested in the emulator). I have a DIV with -webkit-transform properties (scale, translate, and rotate). In Safari it works great, but in Android iScroll seems cause that DIV to loose its transform completely. If I don’t instantiate iScroll the transform appears without changing any other code on the page, so I know it’s the culprit. Any ideas what it would be?

  217. Hi, I’m a italian student and I use your library for a demo project. The library is very nice and usefull. Perhaps I have found a little bug. I use iscroll in a html page with three elements: header, container, footer. Header and footer are div without animation (if I click the div are blocked and I can’t move it). The container is your iscroll. In the container i have a button with a javascript confirm. If I select NO in the confrim message, I return on the same page and if I click on the footer I can move it! Do you know any solutions? Thanks!! bye

  218. Hi, it’s a great scrollbar, but i have following problem:

    HTML select form fields do not funktion in the scroll area, e.g:

    Option 1
    Option 2

    Can anybody help me?

  219. I’m noticing that my scrolling objects appear slightly blurry on my iPad (and on the simulator as well) after applying iScroll. However, when i apply it to a div that has a lot of content it appears sharp. Is anyone else experiencing this? How might I prevent this?

    1. Yeah, I’m experiencing that same problem. Anyone have an idea how to prevent this?

  220. I want to add an up and down arrow to my iScroll that scrolls vertically but am having a hard time getting it to work. The div’s ScrollTop always returns 0 and I am unable to program the up or down arrow to scroll 60 pixels per click either direction. Is there a function I can call with iScroll to achieve this?

  221. Certainly you *could* roll your own framework, but that idea died with prototype. I’ve used so many jquery plugins I lost count: templates, validation, bbq, modal, visualize, slider, etc. If you’re worried about space, its called HTML5 app cache. Download once and done. And I don’t have to worry about IE, or God knows who else thinks its a good idea to come out with another mobile platform.

    1. I too have the same issue. Does it work for BB? I am trying to create an app for BB using PhoneGap.

  222. hey,
    i have a problem with i scroll and jqtouch. both works great with safari but not with the iphone sdk simulator.
    when i click on the link in the “iscroll” list (Link), it doesn’t slide to the next page. when i delete “” the slide works with the simulator but not the scroll.
    maybe iscroll and jqtouch are not compatible or i made a big mistake? i don’t know.
    any ideas?
    thx

  223. On a related CSS issue, unless I explicitly set the height of scroller to be larger than wrapper, scroller seems to be limited to height of wrapper, hence no scrolling.

    I want to leave the height of scroller auto, because its contents vary in the long term.

    I’ve tried with my own div contents, and with your ul content, same thing – scroller is cropped.

    Any ideas? Android 2.2.1.

    1. Solved. Image elements within scroller were rendering and flowing at full height, but wrapper height was not growing with them. When I explicitly set the height of the list elements. Problem solved.

    2. How did you do it? I have a similar problem. I am populating a div dynamically. However My scroller div is not scrolling

  224. Fantastic product!

    Way better than scrollTouch that is available on jquery site

    Maybe think about releasing it there?

  225. Hi Matteo,

    really great work – works like a charm.
    but sadly – nothing else works in my test.
    I can’t click on anything else but the scroller (images).

    the section is same as in your horizontal example.
    I did post this morning in the group, but it never showed up 🙁

    really no link works. I’m getting frustrated, because I try since yesterday. with and without jquerytouch. now totally clean in this example:

    maybe you could take a little look:

    titel
    titel
    titel
    titel
    titel
    titel
    titel

    some link

    maybe I’m totally blind or too stupid?

    thank you very much
    best, tom

  226. Great work!
    We are trying to implement this on a helpdesk system for out IT department. It’s working very well, but then I add a SIGPAD on one of my pages.
    This is for signing documents. You write with your finger, but then the iScroll keeps moving it araound…

    Is there a way to disable it when sigpad has focus?

    1. i had same demand and found a solution for that.

      just set scroll.enable = false

      of course you have to set it true when blur
      scroll.enabled = true;

      scroll is
      var scroll;
      scroll = new iScroll(“id”);
      i hope it can be helpful.

  227. What a wonderful script, my html 5 app is really starting to come alive on the iPad. Many thanks!

  228. nice work!
    the hover effect does not work on android.
    e.g

    ul{width:100%;list-style:none;}
    li:hover{background:blue;}

    1
    2
    3

  229. Love this, but one question, is it possible to have a landscape scroll inside your slide in menu?

    1. Done it now, but I can’t touch links or anything, I can only scroll inside the slide in menu and close the slide in menu

  230. Hello all,
    Does iScroll support BlackBerry? if support which version it can?

  231. Hi, I was wondering if anyone has implemented a circular/infinite version of this iScroll?

  232. Pingback: X-Factorland
  233. to enable html select you must comment out the e.preventDefault in the iscroll.js file. The veritcal iscroll still works for me! 🙂

    1. for got to mention to apply the prevent outside of the iscroll.js like this:

      $(‘#scroller’).bind(‘touchmove’,function(e){
      e.preventDefault();

      });

  234. is it possible to have 2 vscroller? i like to snap magazine pages and simple scrolling dopple pages …

  235. To solve the selectbox scroll top issue use:

    $(‘select’).bind(‘blur’,function(){scrollTo(0,0)});

    Worked for me.
    Thanks Matteo for providing your code.

  236. Have anyone ever successfully use iScroll with a pop-up or modal dialog? I am really cracking my head…

    1. maybe you need lightbox not iscroll. you can find lightbox for mobile with swipe function.
      i tried it on my mobile site and works good on iphone/ipod touch 4

  237. i have iscroll.js on my asp.net for gridview control alone and i have dropdown list on gridview .
    1.once if i add the isDOMContentLoaded method then dropdown is not selecting in ipad
    2.if am not adding isDOMContentLoaded then dropdown selection works in ipad

    can u please help me …..
    Venkatesh
    vsomasundarm2@ballytech.com

  238. Brilliant script, thank you SOOO much!!

    Just one thing: On black / dark backgrounds, the (native) iPhone scrollbars have a thin bright border to separate them from the background. Can this be added to your work too?

    I managed to hack your script badly enough to achieve this, but only partially.

  239. awesome script! I’m using it to hack a prototype together.
    Does anyone know why the quality of ‘-webkit-transform:scale()’ is effected by this script?
    With the script active the outcome of a scale(8) the edges of object become very blurry on text and boxes. With the script disabled, suddenly everything turns sharp again…
    Anyone know what’s going there?

  240. This hack saved me an incredible amount of time, I’ll never be able to thank you enough for that 🙂 I’ll share with you a way to make the footer div actually transparent, because that’s what I had to achieve in effect.

    1. Open the example: http://cubiq.org/dropbox/iscroll/index.html?v=3.7.1 It will be needed for use as an example.
    2. Go to the css clause for the footer div and add “margin-top” to that clause that has the same value as the height value for the footer div, only make it negative. My footer is 39px high, so I give it a margin-top of “-39px”.
    3. Now move to the head section of your page, where the iScroll js code is. Look up the line:
    wrapperH = window.innerHeight – headerH – footerH;

    In my case, I don’t want a static header, so I’ve commented mine out, and modify wrapperH to be equal to the window’s height minus the footer’s height but substracting the footer’s height from that value. This will give the div zero height but the negative margin-top will still make its contents show above the hidden footer div. So, for my hidden header page with the 39px high footer, the line will become:
    wrapperH = window.innerHeight – /* headerH -*/ (footerH-39);

    Now put a transparent png for the footer’s background or just give css opacity to the footer div. The wrapper’s contents should show under the now-translucent footer. How’s that?! 🙂

  241. Hi,

    great plug-in. i am facing this problem with iphone:

    while trying to make the scrollable area longer with jQuery:

    jQuery(“#wrapper”).height(jQuery(“#wrapper”).height() + 15);
    setTimeout(function () { myScroll.refresh() }, 0);

    my scrollable area actually expands as i wish. but when i begin to scroll the old height suddenly gets set to the ‘original’ value. this doesn’t happen in android.

    am i missing something? would be great if you could help.

    thanks a lot.
    best regards Koray.

  242. when I have a combobox in the scroll does not work, what is the reason why this happens? and how I can fix it?

  243. When i look at the demo on my iphone it disables my ability to zoom in and out. Is this necessary or can I allow zooming and still use a fixed position?

  244. Hi

    Love iScroll.

    However, how do I implement horizontal AND vertical scrolling within a fixed frame, or is this not possible ?

    Thanks

    Steve

    1. Hi

      I checked out the examples and none of them implement two directional scrolling unless I’m missing one. Which example will show me the code that I need?

      Thanks

    2. I never believed it was an issue, I just needed pointing in the right direction which you have done. It is now working as required. THANKS.

  245. Hi,
    for the first – sorry for my English it is not so well :/.

    I tried to use your great scrolling stuff and I would like to use it in general in my project. I found out the problem when some form elements are focused in scrolling area.
    I created small test page – http://kristal.php5.cz/scroll.html.

    I focus some elements when page is loaded. Did you have to deal with this issue? I am not very good in webkit – I am pretty sure that it should be possible to deal with it some how. I have some ideas but my knowledges of webkit are realy very small.

    Again sorry for my english.

    1. I could reset scroll area by this way:
      iScroll.wrapper.scrollTop = “0px”
      iScroll.wrapper.scrollLeft = “0px”
      but I would prefer some “better” way. I tried to call iScroll.setPosition(0,0) but it does not work to me.

  246. I have tried it but it did not help.
    Only scrollTop = “0px” helped :-O.

  247. This may be a very nice project, but I don’t see the use of it: in iOS you need to drag with 3 fingers and the content in your fixed div will scroll. Am I missing something?

  248. in examples/carousel,
    I can’t vertical scrolling on ‘wrapper’ DIV.
    how can do that?
    ps. i’m so sorry, my english is not good.

  249. iScroll received +850 comments and it’s becoming hard to find solutions to already asked questions.

    For this reason I set up the official iScroll Google Groups and I invite you all to send suggestions and requests there.

    Hope the iScroll group will be a helpful resource.

Comments are closed.