iScroll 4

iScroll finally received a complete rewrite. Now it’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability.

iScroll 5 is out! Go get the new version! This page is kept just for historical reasons.


Project info

Last code update: 2012.07.14 – v4.2
Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webkit, Firefox, Opera desktop/mobile.
Discussion group
QR Code opens demo page.

Support development

If this script saved your day and you wish to support future developments you may consider sending some funds via PayPal or Flattr.





Overview

iScroll 4 is a complete rewrite of the original iScroll code. The script development began because mobile webkit (on iPhone, iPad, Android) 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.

While latest Android revisions are supporting this functionality (although support is not optimal), Apple seems reluctant to add one finger scrolling to divs.

In addition to all previous iScroll features, version 4 introduces:

  • Pinch / Zoom
  • Pull up/down to refresh
  • Improved speed and momentum
  • Snap to element
  • Customizable scrollbars

Please note that iScroll 4 is not a drop-in replacement for iScroll 3. The APIs have changed.

Also consider that the script is still in beta, and some APIs may slightly change.

Getting started

'Simple' example

In the archive you’ll find plenty of examples to get you started. Before asking for help, please, look at the demos and read through all this document. I know it’s boring, but it holds all the secrets of the iScroll Ninja.

iScroll needs to be initialized for each scrolling area you need. There’s no limit to the number of iScrolls you can have on any single page, if not that imposed by the device memory/cpu. The type and length of the contents influence the number of iScrolls you can use simultaneously.

Try to keep the DOM structure as simple as possible, remove all the unnecessary tags and avoid too many nested elements.

The optimal iScroll structure is:

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

In this example the UL element will be scrolled. The iScroll must be applied to the wrapper of the scrolling area.

Important: only the first child of the wrapper element will be scrolled. If you need more elements inside the scroller you may use the following structure:

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

		<ul>
			<li></li>
			...
			...
		</ul>
	</div>
</div>

In this example the scroller element will be scrolled (together with the two ULs).

iScroll be must instantiated (ie: called for the first time) when the DOM is ready. You have mainly four options:

  • onDOMContentLoaded event
  • onLoad event
  • inline, place the code below the html bit you want to scroll

onDOMContentLoaded

If you have only text and all images have fixed dimensions (ie: explicit width/height) you may use the DOMContentLoaded event.

In the document HEAD add:

<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
	myScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', loaded, false);
</script>

Note that the myScroll variable is global, so that you can access all the scroller functions from anywhere.

onLoad

Sometimes the DOMContentLoaded is a bit hasty and get fired when the contents are not ready. If you slip into some weird behaviors (eg: rubber band effect), try the following:

<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
	setTimeout(function () {
		myScroll = new iScroll('wrapper');
	}, 100);
}
window.addEventListener('load', loaded, false);
</script>

In this case iScroll is started only 100ms after the page is completely loaded (graphics included). This is probably the safest way to call the iScroll.

Inline initialization

With this method the iScroll is instantiated as soon as the wrapper and its contents are written to the page. I wouldn’t suggest this approach, but I see many javascript gurus using it… so who am I to disagree?

First of all include the iscroll.js in the page HEAD and then create the iScroll object just below the scroller.

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

<script type="text/javascript">
var myScroll = new iScroll('wrapper');
</script>

Alternatively you may use your preferred framework ready function (eg:jquery ready()).

Passing parameters to the iScroll

iScroll behavior can be customized with the optional second parameter. Eg:

<script type="text/javascript">
var myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false });
</script>

The second parameter is always an object. In the example above the scroller won’t show the scrollbars. The most common options you will use are:

  • hScroll, used to disable the horizontal scrolling no matter what. By default you can pan both horizontally and vertically, by setting this parameter to false you may prevent horizontal scroll even if contents exceed the wrapper.
  • vScroll, same as above for vertical scroll.
  • hScrollbar, set this to false to prevent the horizontal scrollbar to appear.
  • vScrollbar, same as above for vertical scrollbar.
  • fixedScrollbar, on iOS the scrollbar shrinks when you drag over the scroller boundaries. Setting this to true prevents the scrollbar to move outside the visible area (as per Android). Default: true on Android, false on iOS.
  • fadeScrollbar, set to false to have the scrollbars just disappear without the fade effect.
  • hideScrollbar, the scrollbars fade away when there’s no user interaction. You may want to have them always visible. Default: true.
  • bounce, enable/disable bouncing outside of the boundaries. Default: true.
  • momentum, enable/disable inertia. Default: true. Useful if you want to save resources.
  • lockDirection, when you start dragging on one axis the other is locked and you can keep dragging only in two directions (up/down or left/right). You may remove the direction locking by setting this parameter to false.

Tips: to preserve resources try to remove the scrollbars (h/vScrollbar option).

Pull to refresh

'Pull to refresh' demo

This feature has become famous thanks to the Twitter app and many other native applications on the Apple Store. You can watch a preview in this screencast.

I’ve recently removed the “pull to refresh” from the script core and replicated the same functionality as an external plugin. Please have a look at the included example to get an idea of how it works.

All you have to do is to customize the pullDownAction() function. You’ll probably need an ajax call that loads new contents, remember to call the refresh method once the new data is attached to the DOM. Also please note that the example adds a 1 second delay to simulate network congestion. Of course you don’t want it in production, so remember to remove the setTimeout.

Pinch / Zoom

'Zoom' example

Let’s face it: scrolling is boring. That’s why iScroll 4 lets you also zoom in and out. By setting the zoom option to true the scroller reacts to pinch/zoom gestures. Believe your eyes if you don’t believe me.

Double tap to zoom in/out is also supported.

The minimum setup to activate zooming is:
var myScroll = new iScroll('wrapper', { zoom: true });.

You may further customize the zoom behavior with the following option:

  • zoomMax, this is the maximum allowed scale. Defaulted to 4, it means 4 times the original size.

Tip: to have good looking zoomed images place them into the hardware compositing layer. Or –to speak in plain English– apply -webkit-transform:translate3d(0,0,0) to all images that need to be scaled. Important: hardware acceleration takes a lot of resources, use it sparingly or your app will just crash. Don’t say I didn’t warn you.

Snap and snap to element

'Carousel' demo

The snap feature locks the scroller to predefined positions. This can be used to create fancy carousels.

By default iScroll subdivides the scroller into quadrants or pages of the same size of the wrapper. iScroll 4 also adds the option to snap to any element inside the scroller regardless of the wrapper size.

If you wish to create carousels I suggest to use the default “quadrant” subdivision. The perfect setup is:

var myScroll = new iScroll('wrapper', {
	snap: true,
	momentum: false,
	hScrollbar: false,
	vScrollbar: false });

To snap to elements, pass a string representing the query of the DOM elements the scroller should snap to. Eg:

var myScroll = new iScroll('wrapper', {
	snap: 'li',
	momentum: false,
	hScrollbar: false,
	vScrollbar: false });

In this example the scroller will snap to the top left corner of all LI elements inside the scroller.

Note that the snap string is applied to the scroller (ie: scroller.querySelectorAll(snap_string)), so '#scroller li' is wrong, while just 'li' is correct.

Custom scrollbars

'Custom scrollbars' demo

You can now customize the scrollbars appearance with a bunch of CSS. To apply a class to the scrollbars you just need to pass the scrollbarClass option:
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });.

In this example the myScrollbarH class will be applied to horizontal bar and myScrollbarV to the vertical bar. Note that the scrollbar is composed by two elements: container and indicator. The container has the same height of the scroller wrapper, while the indicator is the scrollbar itself.

The scrollbar HTML structure:

<div class="myScrollBarV">
	<div></div>
</div>

How to style it:

.myScrollbarV {
	position:absolute;
	z-index:100;
	width:8px;bottom:7px;top:2px;right:1px
}

.myScrollbarV > div {
	position:absolute;
	z-index:100;
	width:100%;

	/* The following is probably what you want to customize */
	background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
	border:1px solid #800;
	-webkit-background-clip:padding-box;
	-webkit-box-sizing:border-box;
	-webkit-border-radius:4px;
	-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}

Have a look at the demo CSS to get an idea.

Public methods

iScroll has some public methods you can access any time to interact with the scroller. The most important of all is refresh, it must be called each time the content inside the scroller changes.

Public methods are accessed thank to the global variable used to instantiate the iScroll. In the examples I used myScroll, so you can access all the methods with: myScroll.name_of_the_function(parameters).

Continue reading for more details.

Mastering the refresh() method

iScroll needs to know the correct dimensions of both the wrapper and the scroller. They are computed the first time at start up but if your code changes the elements size, iScroll needs to be warned that you are messing with the DOM.

This is achieved by calling the refresh function with the right timing. Please follow me closely, understanding this will save you hours of scrolling frustration.

Every time you change elements height/width or you modify the html structure in any way (eg: appendChild or innerHTML) the browser renderer updates the page. Once the browser applied the changes you can access the new DOM (and properties) from javascript again. Sometimes this process is not instant.

To ensure that javascript gets the updated parameters you can force reading the DOM in a new instance. Look at the following code:

ajax('page.php', onCompletion);

function onCompletion () {
	// Here modify the DOM in any way, eg: by adding LIs to the scroller UL

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

Here we placed the refresh call into a zero timeout, doing so we gave the browser the time to refresh itself and the new element dimensions are correctly taken. There are other ways to ensure the browser actually updated the DOM, but so far the zero-timeout has proven to be the most solid.

So the golden rule is: if unsure call the refresh inside a timeout.

Javascript scrolling

You can scroll programmatically with scrollTo, scrollToElement and scrollToPage (if your are using the snap feature).

scrollTo(x, y, time, relative) scrolls the wrapper contents to the x/y coordinates in a give timeframe: myScroll.scrollTo(0, -100, 200) position the scroller 100 pixels down in the wrapper within 200 milliseconds.

You can also scroll relatively to the current location by passing the forth parameter: myScroll.scrollTo(0, 10, 200, true). The scroller is shifter by 10 pixels in the y axis starting from the current location.

scrollToElement(element, time) scrolls to any element inside the scrolling area: myScroll.scrollToElement('li:nth-child(10)', 100). This code scrolls to the 10th element in the list. The first parameter is a CSS3 selector or the element node itself.

If snap is active you can also use the scrollToPage(pageX, pageY, time) function: myScroll.scrollToPage(1, 0, 200). This will position to the second horizontal page in 200 ms. Pages are zero based (ie: page 1 is 0, page 2 is 1, …).

Destroy!

To completely destroy the iScroll and free some (a lot of) memory, call the destroy() method.

Best way to destroy an iScroll:

myScroll.destroy();
myScroll = null;

iScroll Lite Edition

iScroll is evolving and adding many new features to the basic scrolling functionality. If all you need is the plain old scroller for mobile webkit, you should really use iscroll-lite.js instead.

iScroll Lite is a frippery free version of iScroll 4. It supports scrolling on mobile devices only (no desktop compatibility). Snap, zoom, pull to refresh and superpowers are all stripped away. Fat free, eat as much as you can.

Known issues and future development

The followings are known issues I’m currently working on:

  • Form fields compatibility
  • Zoom glitches
  • Better desktop browser compatibility
  • onScroll event
  • hash and hash change support (ie: http://example.com/#element-id)
  • automatic refresh upon DOM change

Credits

iScroll is evolving thank to the help of all those who sent suggestions, bug reports and ideas on github, here on my blog and googlecode. This is by no means the work of a sole man.

In pure rnd() order: beedesk, Daniel J. Pinter, Aseem Kishore, Alex Gibson, Christoph Pojer, Shimon Dookdin, Will Bailey, Aaron Infidel. (Let me know if I forgot your name).

All those who supported, linked, loved the iScroll.

Projects using/based/inspired by the iScroll library

It became impossible to track all the websites and applications using iScroll. It has been used by Apple, Playboy, People.com, LinkedIn and it is in so many Phonegap’d applications in the Apple store that it is impossible to count them all.

Comments and Support

The blog comments reveled an inadequate system to discuss iScroll features, please use the google discussion group instead.

888 thoughts on “iScroll 4”

    1. Ryan,

      Did you get this figured out? I am having the same issue, once I initialize the iScroll-4 plugin my scroll to no longer hides the address bar.

      Matteo, can you please help with this? window.scrollTo(0, 1); does not work any longer, how can we still hide the address bar while using this plugin? I need the real estate in landscape mode.

    2. I second Mike’s motion. This is an awesome script that’s made my life a lot easier, but I really do need that piece of screen real estate back. Any ideas? Thanks in advance.

  1. Hi!

    Great what your are doing!

    But could you provide your QR-Tags with real links underneath? Because my iPad has no camera to read QR-Tags. So for me it is tedious to try your samples.

    Thanks!

  2. Thanks for the great script! Unfortunately it’s really difficult to view the demos. Can you use normal links as well as the QR Codes?

    1. Javascript scroll on page load:

      window.scrollTo(0, 0);
      or
      window.scrollTo(0, 1);

      Only difference being a 1px break at the top which looks good

  3. nice work 🙂

    i am having trouble combine it with iui script. i need iscroll header and sliding loading page with iui.

    i have found this demo: http://cubiq.org/dropbox/iui/samples/iscroll-demo/

    page 1 is perfect but it has bug on page 2 (with scrolling) and it load a javascript too get page 2info. unlike iui using html link # tag.

    i have Google but all i can found are old script . so if someone have nice tips for me plz 🙂

  4. Hi, is there a way to integrate iscroll 4 with iui ? like the previous 3.xx version?

    any one can help?

    thanks in advace

  5. Hi,

    I want to know whether this hack will affect the layout of the web application in the normal desktop.

    Thanks

  6. Any word on compatibility with form fields? This is perfect except that on some of my pages I need to have combo boxes for users to select options.

    1. Man, o just have the same issue. Support for form elements is the only thing that must be fixed before this plugin get perfect!

      Good work! We’re all waiting to fix this little problem with inputs. 😉

  7. Form elements rubber banding the window == annoying – i even started creating my own virtual keyboard as a long work around (via slideinmenu 😉 )

  8. Is there any way to disable snap if someone zooms in on an image? The two don’t play well together as snap is constantly re-positioning my zoomed in image.

  9. I have created a web app using iScroll. When I launch it in safari, and add it to the homescreen so that I can use it as a fullscreen web app, all links open in Safari as opposed to within the app.

    Is this a “feature” or am I doing something wrong? Is there an attribute which I need to add in order to force the links to open in the same place and not launch Safari?

  10. I just want to say this is amazing. So far I have it running on an android emulator 2.2. Looks real good.

    I do have one problem. I added buttons with javascript alerts in the footer.

    When the alert comes up and I click OK, the browser is repositioned to the top (ie shows the URL address bar). The list content is still positioned correctly.

    Is there something that I need to do after the alert executes?

    Thanks.

  11. I was having trouble using a carousel with two divs on the iPad. There seems to be a memory leak sometimes, if you pass

    snap: true

    When the iPad was rotated and the CSS changed, it caused the iScroll.js (line 911) to constantly compare 0 with 0 (frustratingly, only sometimes), and never broke out of the loop. Replacing it to

    snap: ‘li’

    seems to have fixed the problem. I believe the issue is if the carousel ‘snaps’ incorrectly to a section of the screen that doesn’t have any ‘real’ html, the loop is trying to figure out where to snap too, but the pos is 0, and the maxScrollX = 0 as well.

    Other then that, great work.

  12. Matteo, that is a great work, thank you!

    I use iScroll with stackLayout, the “wrapper” division contains a stacklayout element. In some subviews I use the new “pull to refresh” option in others not. So I have to re-initialize iScroll for every subView. When I first uses “pull-to-refresh” and remove this option for the next subView, the subViews content has a wrong y-offset, due to the height of the former (now removed) pull-divison.

    After I inserted a “that.refresh()” statement in line 815 of iscroll.js – all works fine.

    (Beta app is http://rhein-zeitung.de/app1)

    Greetigs

    Jochen

    P.S.: I can confirm the “li” problem which Andrew described.

  13. I am having problems after the orientation changes. I have a function called that manipulates the DOM (quite a bit) but its broken now because the window size isn’t reporting correctly. Am I just missing something?

  14. Hi.
    I’ve implemented simple scroller to a list and it scrolls nice on iPhone, but the whole page fails to scroll. I can only zoom it by double-tap.
    It seems that
    document.addEventListener(‘touchmove’, function (e) { e.preventDefault(); }, false);
    may be the case. Can I use your scroller and scroll the page at the same time?

    Thank you

  15. You rock man!

    Is there any way to get the current scroll offset from iScroll? So it can be subtracted from e.pageX and e.pageY to determine where in the scrollable area a click event occurred?

  16. create!
    but ,how can i implement a horizontal scroll exactly?
    i set hScroll and hScrollbar true, but horizontal scroll is not display.
    ———————javascript————————
    var myScroll;
    function loaded() {
    setTimeout(function () {
    myScroll = new iScroll(‘wrapper’,{hideScrollbar: false,hScrollbar: true,vScrollbar: true, hScroll: true, vScroll: true});
    }, 100);
    }

    window.addEventListener(‘load’, loaded, false);
    ———————javascript————————

  17. Hey there! great work!

    I tried it using iphone and oh great!
    thats wad im looking for!

    unfortunately, this dont work in IE, do they?
    Because Im trying to build a website, using html and css to cater for both desktop and mobile devices, and the imonsters(iphone, itouch,ipad) doesnt comprehend the fixed header and footer, while this dont work in IE 🙁

    Sadly i ahev to give this up, but i love ur iscroll!! keep it up! 😀

  18. Hi,

    short question regarding the carousel. This seems perfect for me. I only have one problem. When I try to scroll down, it does not work when I am in the wrapper area, only when I scroll underneath or obove the carousel area. Shouldn’t this work when setting vScroll: false?

    Best regards,
    klaas

  19. The script seems not to behave well with anchors. If my url contains an anchor (and the anchor point is in my scrollable area), I cannot scroll above the anchor point.

  20. Awesome work man 🙂 love the new script. Its the proper touch tablet scripts! Really helped me out to prototype a tablet webapplication.

  21. Hey Matteo,

    bad to know that it does not work that simple. Good to know that there is some kind of workaround. Can you tell me how you worked around that issue?

    cheers ,
    Klaas

    1. You have to check the movement threshold (say 10px). After that threshold you know which direction the finger is moving, if it is moving horizontally you preventDefault and keep iScroll do its stuff. If moving vertically you can skip the iScroll and proceed with standard page-scroll.

  22. Works fine on Android 2.2, but I’m noticing that on Android 2.1, it seems to only work once. After that, it just scrolls the whole page rather than only the DIV. Is this a known issue or is there a workaround?

  23. can the zoom be not only zooming the scroll area but also to zoom the whole html page?

  24. Hi

    I am using the scroll with iui in the div of a infowindow of google map. However, the content of the window shows up as blank. Can you please help?

    var myScroll;
    function loaded() {
    myScroll = new iScroll(‘wrapper’);
    }

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

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

    function createMarker(point, name, info_url, img) {
    var marker = new google.maps.Marker({ position: point, draggable: false, title: name, icon: img});
    marker.info_window_url = info_url;
    google.maps.event.addListener(marker, ‘click’, function() {
    shared_info_window.close();
    var fetched_content = “new text new text testing testing testing from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlYourContent”;

    shared_info_window.setContent(fetched_content);
    shared_info_window.open(map, marker);
    });

  25. The content is tagged within a div like below and not as mentioned in the above comment

    var fetched_content = “new text new text testing testing testing from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlYourContent”;

  26. Hi there,

    I am having a problem with that wonderful piece of work of yours.

    Scrolling is perfect, but when I touch a link (touchmove) it immediately opens the link even if I keep touching and want to scroll the div.
    What am I doing wrong?
    Thanks for your help.

  27. Thanks for iScroll! It’s really amazing 🙂

    Can I ask if it’s possible to have a position: fixed column in the left of the wrapper so the iScroll doesn’t hide it. I basically want a nav-menu on the left of the wrapper and I want it static.

    Thanks in advance.

  28. Great work! Thanks.The iScroll works great on Chrome/Safari/iOS/iPad, but not on Firefox. The horizontal scrollbar is stuck and not-functional at all. Is there a way to make it work, or at least a way to show the default scrollbar when on firefox? Thanks.

  29. Figures. The one thing I need working to use this is the form fields. And that is completely broken…ugh

    Is there a timeframe on 4.1 so I know whether or not I should abandon this for my project?

  30. I need to implement a page to include a iframe inside it, I tried but doesnt seem to scroll the whole iframe content

  31. Using iscroll for a while now, but the fatal form elements bug is killing me and my app. Sorry, but this is just taking to long, I’m redesigning my app with another framework.

  32. It just works great!! I spent a lot of time to solve the scrolling problems in iPhone/iPad, until I found this!

    Your script does make all iOS WebApp developers’ life easier!

    Really nice job and hope you keep this on!
    Thanks so much!

  33. hi, I am developing a web up for iphone using UIWebView.

    one of my div element is wrapped around with two scroller objects. during the touch event to execute for example a javascript it respondes two times. but on desktop ti works fine. I how I disable a touch event from one of the iScroll objects?

  34. Hi, is it possibile to use iscroll inside a google maps info window? I tried it many times but the text just flows out f the infowindow without scrollbars appearing… is there anyone wh has had the same problem? Thanks!
    Giac

  35. Hi,

    iscroll v4 does not work very well on Android 3.0/Motorola Xoom (screen flashing) while v3.7 seems better.

    Regards.

  36. I implemented this in simple page… it works ..but i need hideScrollbar : false, i want it to show up all the time.// i cannot implement this.. and also mouse scrolling with mouse wheel doesn’t work… i removed all extra css/footer/header..

  37. Excellent plugin- one question: is there any way to get the current scroll position of an iScroll ‘area’? (Something similar to jQuery’s .scrollTop() ) I see there’s a way to set the scroll offset, but any way to get it?

    1. if (myScroll.y = 600) {
      $(“.nurseLink”).addClass(‘selected’);
      }
      console.log(myScroll.y);

      I get an error that says, “Uncaught TypeError: Cannot read property ‘y’ of undefined”

      How do I grab the Y location to add a class to something?

  38. Tip: If you are using iScroll on iOs and are scaling the viewport / 50% (because of retina awesomeness) make sure to change the scrollbar width to an even number.. 7px -> 8px or 10px

  39. Is it possible to use iScroll for horizontal scrolling? For example, I’d like to have a navigation container with n number of items that can be scrolled left to right, independantly of the page scrolling. Is this possible?

  40. Greetings to all,
    I am using iScroll lite, and it seems that I cannot click a ComboBox component that I added inside the scrolling region.

    Any ideas how to fix this?

  41. Love the script.

    I was having some problems of the scroll not canceling on mouseup events on the desktop. I think part of the problem was that you are attaching those event triggers to the scroll, but the scroll isn’t taking up the entire browser. So any event outside my selector wasn’t getting triggered.

    I fixed this by adding 2 new utility functions:

    // attach window events
    _wbind: function (type, el) {
    window.addEventListener(type, this, false);
    },
    _wunbind: function (type, el) {
    window.removeEventListener(type, this, false);
    },

    These events are attached to the window, and then I went through and changed all the END_EV and CANCEL_EV binding to this:

    that._wbind(END_EV);
    that._wbind(CANCEL_EV);

    This seems to have fixed the problem. And you should never have a case where you will trigger 2 START_EV events, so making the window trigger those makes sense.

    Thanks

  42. wow, just realized you can pass the window object to your _bind function. So no need for the new functions.

    just change the END_EV and CANCEL_EV _binds to:

    that._bind(END_EV, window);
    that._bind(CANCEL_EV, window);

    Sorry bout that.

  43. Hi !

    Very great job with all your plug-in.

    I have a problem integrating input box into acordeon into iScroll.

    No problem for the input box into accordeon, but with the iscroll, they don’t be writed anymore.

    Take a look on my website to see what i mean.

    Thanks a lot

  44. I am trying to modify the ipad example but as soon as I change the height of the #navScroller > li, the whole thing become very messy. Can you explain to me how to fix this and why this is happening. It seems to only work fine with a 40px height

  45. Another question- it looks like you haven’t yet implemented an on scroll event. Any ETA on this feature? It’s critical for what I’m doing.

    Actually, if iScroll is just using CSS transforms on the scrollable element, could I just add a transitionStart listener to it?

  46. very very cool script, but i have trouble with the number of visible images on my testsite (http://p139954.webspaceconfig.de/). there are only 7 of 9 images visible. but the indicator shows 9 pages. and if set 5 images i can see 5 images but now are 2 empty pages after the last image.

  47. Hi there,

    Awesome plug-in just a small issue (that I’m sure you’re aware of) It hates forms. I’m not sure why but it doesn’t seem to let you click on any inputs on a form when it’s running.

    Is there a work around for this? Currently I’m having to make my forms just fit into the window and killing the script but I could do with a better workaround if you know of one.

    Ta 🙂

    1. Actually it’s only the drop down’s that aren’t working and you can still get to them by clicking a text field above it then clicking next. Not ideal but it kinda works.

  48. I love the script but have the following issue, I am currently using this script for a iphone app and for some reason it alters my phone number links, (tel:0000000) and makes them unrecognizable for the iphone (cant press and call). Any ideas?

  49. Hi,

    First off, great script.

    I am using it successfully for a swipe left/right gallery but my question is this…

    I cant scroll down the page (IOS at least) when i start the swipe over the scroller element. Obviosuly this is becuase of the code behind the scenes picking up my touch position and wondering which way I am going to swipe.

    As I only need left/right gestures picked up, is there something I can do so the full page still scrolls down *IF* the gesture is up/down only (at the moment the page would just remain in the same place unless I gesture outside the wrapper area).

    Tx, keep up the good work.

  50. Hi there. I would like to thank you for this library. It has served awesomely 🙂

    On the last two days i’ve been banging my head against an issue wich i don’t know if it is known: When the wrapper div is somehow set a “display:none” css property, the scrolling won’t work (just the bouncing will). But…it will work if the css property is set *after* initializing the iScroll. If the display:none is put in the css file, then iScroll won’t function properly.
    I’ve found this after messing with jquery’s fadeIn/fadeOut functions.

    Bye!

  51. Hello!

    First of all thanks a lot for the great script, its really been very helpful.

    Secondly, a quick question regarding iscroll-4. I was using the pageX attribute with the “old” to detect the current page while swipeing, to update an image counter somewhere on the page, but it seems that this doesn’t work with iscroll-4. If I alert myScroll.pageX it seems to always return undefined. Any ideas about this?

    Thank you!

    1. Thank you! I had tried before but currPageX hadn’t worked, maybe i was doing something wrong. It works just fine now.

  52. Does it can work well in Android Emulator? I try a lot of times but failed. Could you please give me some advices, thanks!

  53. I have problems with input/select fields. I can’t select them. I fixed this problem by adding following lines to the _start function:

    if(e.target.nodeName.toLowerCase()==”input” || e.target.nodeName.toLowerCase()==”select”)
    return;

    Hope this helps others who have the same problem.

    Thanks for the awesome script!!!
    Tobi

  54. Super script. If we’re able to work out some issues and put into production there will be a nice donation on the way.

    I was able to get around the Forms issue with Tobi’s fix…thanks!

    I’m finding the smaller the font size, the harder it is to recognize a link has been touched. Once I get to 10px in size or lower I can no longer touch links on the iPad. Sizes 11 and 12 must be very precise. It gets easier as the font gets bigger.

    Is this a known issue?

  55. I’ve been having problems with memory issues, at least that’s what I suspect as the iPhone crashes. Therefore I’ve opted to use the lite version as I only really need the scroll…

    However, I don’t seem to be able to get the address bar to disappear using the usual window.scrollTo(0, 1);

    Any suggestions as the the problem and possible fix?

    Many thanks…

  56. Hi,

    i got a frameset with index.hml calling top.html, body.html and footer.html,
    in the footer.html, i got a div with pics thumbs, i want the ” scrolling thumb gallery” effect on my ipad with the touch gestures you can scroll pic …and click pic to load new content in body.html the central frame
    any live example how to do that without pulling my last hair 😉

  57. First off thanks for the wonderful script! I’ve run into a problem on iPad2 though: when I’m scrolled down into a container I cannot find any reliable way of determining an element’s position relative to the viewport. All methods I’m familiar with just return huge values as they do not seem aware that the scroller has translated. Chrome 11 on desktop does return correct values so it’s quite hard to debug. Any suggestions?

  58. Hey and thanks for a great script 🙂 However mine is behaving a bit strange. When I scroll, the div only moves when I’ve got my finger down. if I let go the div scrolls right back to where its original state, almost like the effect you get when you scroll to the end of the page, and if you scroll past that, the page snaps back. Any idea what’s causing this?

    1. This is the code I’m using (Taken from the iScroll website)

      function loaded() {
      document.addEventListener(‘touchmove’, function(e){ e.preventDefault(); });
      myScroll = new iScroll(‘wrapper’);
      }
      document.addEventListener(‘DOMContentLoaded’, loaded);

    2. I just found out that this is a known issue between jQTouch and iScroll. Is there any solution to this? I’ve googled everything, can’t seem to find anything..

      Thanks in advance,

    1. what should I say? more options in the market. I’m happy about that. Open source code is never enough 🙂
      scrollability uses timers and intervals, while iscroll is 100% hardware accelerated. with timers you get better momentum, but JS timers are faulty by default. Apart from that iscroll has many other features (scrolltoelements, pull to refresh, zoom, …).

  59. Hey Matteo, is there any solution to the jQTouch + iScroll combination? I’m getting the rubber band effect when I change page (Actually changing div) and I’m not finding any solution from google

    1. Mmm, where can I find the exact code for the refresh? When I google it all that appears is the pull to refresh feature? I can attach the refresh() to the animations of the scene switches, but don’t know the actual code for refresh..

      Thanks a lot for your help man! And appreciate iScroll a lot too!

    1. Solved it just now 🙂 Thanks for your help!

      I added that refresh code you provided, refreshing myScroll everytime jQTouch animated a pagechange. This seemed to solve the issue, being the rubber band effect

  60. Hey man, great script! It’s really the only scroll that seems to work well and smooth on all platforms!

    I have 1 problem tough:
    I’ve implemented it on my site:
    http://www.mimesis-design.com/foodyx/
    and when viewing from chrome and desktop safari everything’s good. But when viewing from mobile safari (iPad) the whole wraper get dropped to the background of the page, regardless of z-index that is defined in the css file.

    Can you help with this? Thanks!

  61. Hi Matteo,
    Thanks for your good iScroll library. It’s really useful for developing web-app.

    I’ve a one question about your “Pull to refresh” demo.
    It works well on iPhone when I open demo url “http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/” but I think Android device doesn’t works well (my device version is 2.2)

    Is there any missing for my testing?

  62. I have one problem on iphone: when i scroll to the end and further and tap with my second finger on free zone, scroller freezes.

  63. This is not an issue with the script, more a tip for an unobtrustive way of adding iScroll to an existing jQTouch webapp. This way, you don’t need to modify any html-code except adding the in your header. Also, it seems to play nice with jQTouch, without forking.

    Note: This is a semi-solution: it adds scrolling to all your ‘screens’ and keeps the toolbar at the top, but does not add a footer yet. I abandoned the use of iScroll because it wasn’t really adding anything to my app, but I was very keen on finding out if it would work with jQTouch, so feel free to adapt and build on the script.

    The script basically looks for all your screen-divs, takes all content *but* the toolbar, and wraps it in two divs: ‘wrapper’ and ‘scroller’. It also destroys and re-creates the iScroll object eacht time you navigate your pages. This way it only requires 1 iScroll object.

    As said: add iScroll to the tag in your header, and then add the following script somewhere:

    $(‘body > * > *’).each(function(){
    $(this).children().not(‘.toolbar’).wrapAll(”);
    $(this).children(‘#wrapper’).wrapInner(”);
    });
    var myScroll = new iScroll(‘wrapper’, {checkDOMChanges: false} );
    $(‘body > * > *’).bind(‘pageAnimationEnd’, function(e, info){
    if (info.direction ==’in’){
    if (myScroll) {myScroll.destroy();}
    if ($(‘div#’+e.target.id+’ #wrapper’).get(0)) {
    setTimeout(function () { myScroll = new iScroll($(‘div#’+e.target.id+’ #wrapper’).get(0)); }, 0);}
    }
    });

    1. html formatting destroyed my script. Another go:

      $(‘body > * > *’).each(function(){
      $(this).children().not(‘.toolbar’).wrapAll(‘<div id=”wrapper” /></div>’);
      $(this).children(‘#wrapper’).wrapInner(‘<div id=”scroller” /></div>’);
      });
      var myScroll = new iScroll(‘wrapper’, {checkDOMChanges: false} );
      $(‘body > * > *’).bind(‘pageAnimationEnd’, function(e, info){
      if (info.direction ==’in’){
      if (myScroll) {myScroll.destroy();}
      if ($(‘div#’+e.target.id+’ #wrapper’).get(0)) {
      setTimeout(function () { myScroll = new iScroll($(‘div#’+e.target.id+’ #wrapper’).get(0)); }, 0);}
      }
      });

  64. Hey, I’ve managed to get iscroll working pretty well. Thanks!

    Question: In certain spots of interactivity in my iScroll I have to popup divs etc. that are aligned to items within the scroller. This has worked by adding the iscroll.y. However when I try to get the position for a textbox (after an edit has begun) it does not work as expected. I’ve seen that you have put information that there are issues with forms. Is that what you are referring to? Is it possible for you to give us a brief explanation as to what we are up against with forms here? Is there anything I can do to help?

    James Scott

  65. First off: Thanks for this very awesome and impressive script which helps me (and MANY others) out a lot.

    I am trying to create a photo gallery with swipe gesture left/right and snap and zoom. Basically this is all working very well based on the carousel sample.
    But I have trouble with the zoom feature. Works well, but I would like to disable any panning/swiping to the next pic while user is zoomed in.

    Also, I have some odd results when I zoom out, back to 100%. It would be nice if the current image snapped at the set position again when zooming to 100%.
    onZoomEnded works well.

    Can I detect the current zoom level somewhere (when and how to do it)?
    Can I temporarily disable swipe when zoom level is above 100%?
    The zoom(x,y,scale) function doesn’t work for me..

    Thanks to anyone for advice on this!
    m.

    1. Hello, and thank you all for this superb script! My question is, i want to write myself the photo gallery. Is there a function which register the swipe, so that i can code with it? Or was i just blind and didn’t find that? I don’t want to use finished carousel script. Many thanks and a sunny day.

  66. iscroll 4 lite is working perfectly for me however I find myself needeing the following:

    getPosition() and getPositionElement()

    I need these to support a search in a list item where the user may want to scroll to a position and then have me do the search from there where I use scrollToElement with a match.

  67. Hi – Great piece of work.

    I am having the same problem that was posted a while ago, was wondering if anyone had worked this out and is willing to share.

    “When I try to scroll down, it does not work when I am in the wrapper area, only when I scroll underneath or obove the carousel area. ”

    Thanks in advanced.

    Kym

  68. Hey, thanks so much for this!

    I am having a bit of an issue getting iScroll to work with an Accordion menu. It works great for the first section of the accordion, but all of the accordion sections after the first produce the rubber banding effect with bounce on, and no functionality at all with bounce off.

    Here is the site, it is a student project, all hypothetical, meant for the iPad..
    claycooperdesign.com/hhgg

    Please let me know if there is a way to make this work, or what I am doing wrong. Thank you!

  69. Problem with loosing iscroll on forms with select items after select closes.

    The blur event is being processed but since some of these items were down the screen and force the top out of view I had a problem when iScroll came back into focus. So I added a select class to my select items and this event when my dynamic page is loaded:

    $(“#wild_assessment .select”).blur(function() {
    setTimeout(function () {
    $(“#acres_burned”).focus();
    }, 50);
    });

    I need to make it more generic but you get the idea. I just need to move the focus to the top item. Note the 50 msec delay. Without that it did not seem to work.

    Now iScroll works after a select item is finished even if they don’t change anything.

  70. hi

    great work needs to be said !

    i try to implement an endlessscrolling;
    so whenever myScroll.y gets bigger,
    i append some li’s to an ul.

    using -lite version (did not try another)
    when scrolling on iPhone, it pulls me always back on top,
    so i cannot make it down the list.
    EXCEPT – when i flip the handset 90° to vertical and back horizontal; the ‘pull-to-top’ behavoir is gone ..

    any AHAs anybody ?

    1. Hi rmy

      “when scrolling on iPhone, it pulls me always back on top,”

      I had that exact issue on my webpage.fixed it by using the OnLoad example code (with the timer).

      Hope it works for you as well.

    2. Wanted to comment on this issue first as I have been doing extensive research on mobile development as of late. What you are describing sounds like it is related to the iPhone viewport rotation bug. See the numerous discussions on Stackoverflow for more info.

      The reason I came to comment is two-fold:
      First, thank you very much for this script. It works beautifully. A bit stutter step on Android 2.1 (MB300 – Backflip) and 2.2 HTC.
      Second, I thought you might want to know that it works on Miren and Skyfire mobile browsers as well! (Checked on Android 2.1 for Motorola Backflip)

      The only Android browser I couldn’t get it to work on yet is Opera Mobile.

      Once again thank you!

  71. Great work, I am very impressed. I have implemented for the ipad a horizontal page to page swipe (with snap) and on each page a left panel with horizontal scroll.

    It works well. The only thing is that the horizontal scroll reacts very direct (even if you move your finger one cm it snaps to the next page). How can I adapt the script that a small horizontal gesture does not result in a snap to the next page?

    Thanks for all the work!
    Kind regards,
    M.

    1. You have to modify the core, you might want to add a threshold to the _snap() function. Anyway it has been asked before, so I think I will add this feature in a future release.

  72. I know this is an odd request, but is there a method for making a div or divs FIXED as opposed to defining what’s scrollable?

    the only reason I ask is because I have to shoe-horn fixed footer compatibility for iPad in to an existing site where I can’t setup the wrapper, etc.

    Any help would be appreciated!

  73. This is probably a very simple question.

    This plugin is working so well but i’m no javascript expert. All I want to do is change ‘wrapper’ to a class instead of an ID.

    function loaded() {
    myScroll = new iScroll(‘wrapper’, { zoom:true });
    }

    Lets say the ‘wrapper’ is a class, what do I need to add for that to use a class instead of an ID by default.

    Thanks in advance.

    1. I think a better way of putting the question is.

      From looking at your demo files. Is it possible to nest them within each other? For example…

      Horizontal scroll, then nest a vertical scroll within a horizontal scroll , then nest a carousel within the vertical scroll , then nest a pinch/zoom div within a carousel , etc..

      Is this possible? or do the finger actions get confused with each other.

      If it can be done is the any demo file for this.

      Thanks

    2. You can add a wrapper class and then load iScroll to that class. When my page is done loading I grab the id for the page:

      // iscroll handling
      if ($(‘div#’+e.target.id+’ .wrapper’).get(0)) {
      if (myScroll) {
      myScroll.destroy();
      }
      myScroll = new iScroll($(‘div#’+e.target.id+’ .wrapper’).get(0), {fixedScrollbar:true, bounce:false});
      }
      //end iscroll handling

  74. Any idea how can I get a carousel to loop infinitely ?
    I managed to get it to loop adding one extra empty slide on each end and using the on scroll end events but it scrolls all the way back and there
    there seems to be no way of making it go to the first slide without doing the scroll animation

    Thanks in advance

  75. HI,

    Thanks for the script.
    I have implemented the script in a web page and works well with the exception of pages loaded with fancybox.

    In that case nothing happens. Are they compatible? Is there any setup I have to do?

    Thanks again
    PS Also is it possible to show the grey scroll line all the time? Otherwise ipad users don’t know that the area can be scrollable

    I have a quick question.

  76. Hello;

    Application developer to ipad. application using the iscroll With the music does not start and click in iscroll When used instead of click touchstart music begins

    Does anyone have information about such a problem?

    1. Hello;

      Application developer to ipad. application using the iscroll With the music does not start and click in iscroll When used instead of click touchstart music begins

      Does anyone have information about such a problem?

      WORK:

      $(“.contain”).live(“touchend”,function(){

      var currentFile = “”;
      var oAudio = document.getElementById(‘myaudio’);
      var audioURL = document.getElementById(‘audiofile’);
      oAudio.src = audioURL.value;
      currentFile = audioURL.value;
      $(“.play”).addClass(“pActive”);
      $(“.pause”).removeClass(“paActive”);
      oAudio.play();

      });

      DOES NOT WORK:

      $(“.contain”).live(“click”,function(){

      var currentFile = “”;
      var oAudio = document.getElementById(‘myaudio’);
      var audioURL = document.getElementById(‘audiofile’);
      oAudio.src = audioURL.value;
      currentFile = audioURL.value;
      $(“.play”).addClass(“pActive”);
      $(“.pause”).removeClass(“paActive”);
      oAudio.play();

      });

  77. I have a page which can get iScrolled horizontally and vertically by adapting your 2way sample.

    I put a carousel onto this page. While this works ok, it seems I can’t unbind the touch-events from the page, while I am touching the carousel. Or do I miss something?

    Any idea?

    andy

    1. btw… the problem with this setup is, that the page scrolls, when I’m scrolling/touching the carousel.

      a.

    2. Is there a way to tell iScroll to do so, or do I need to stop propagation manually (and where would I do it)?

      andy

    3. As it seems, the easiest way to allow stacked iScrolls is to stop event bubbling using

      event.preventDefault()
      event.stopPropagation()

      on touchstart, touchmove, mousemove events.

      I think it would finally be a nice option for iScroll itself.

  78. Hai

    Does Anyone know, iscroll conflict solve with jplayer?

    i need support for that conflict

    Thanks

  79. Sorry but… = ]

    [div id=”wrapper”]
    [div id=”scroller”]
    [form name=”test” action=”#”]
    [select name=”dingo”]
    [option]test1[/option]
    [option]test2[/option]
    [option]test3[/option]
    [option]test4[/option]
    [/select]
    [/form]
    [/div]
    [/div]

  80. i am working on inner div scroll , for this iam using iscroll.js

    it creates problem when i add a text & when it added in the incoming div to gives extra space in android
    when adding more text , itsbring lots of space in the incoming div

    but this scenario is fine with IPhone/Ipad

    plz help

    waiting for ur response

    regards
    ADY

  81. Can a scroller have another scroller in it?

    Example: a “page” that scrolls vertically that has a horizontal carousel in the middle. The iPhone App Store has this exact model.

  82. Hi,
    Thanks for the cool script that made my life alot easier. Now i have one quick question. I am using iscroll carousel to show the pages for one of my ipad web app.The functionality i am looking for is .. when user reach to the last slide it should be loop back to first automaticaly. Means after last slide if user swipe again then it should display the first page and then 2nd, 3rd… so on..
    Can you help me out how can i get this to work continuously?

    Thanks

  83. On right side of my site titled “iNews Categories” is a drilldown listing. When viewed in iPad it will not scroll through the listing. Will iScroll work for this type of listing? Thanks

  84. hi,
    i use iscroll4 with scrollToPage feature, all things are cool, is there a way to show wich page is visible?
    like page number you know?
    thanks for help
    jerry

  85. Hi,

    I am trying to use iScroll on following way:

    {{tmpl(toolbarLinks) “#ArtToolbarTmpl”}}

    {{tmpl “#ArtDescTmpl”}}

    Content inside scroller need to be scrolled. But on debugging I see that height for contentWrapper and scroller are same. Do I need to set anything specific in CSS for it to work,

    Thanks
    Neeraj

  86. Ive got iscroll 4 working great but the slider menu keeps adding “new rows” on its on beyond the ‘s i set. i cannot figure out for the life of me why its doing that. Anyone else experience this issue?

  87. Great script, very handy.

    I noticed that the scroll handler soaks up every right-click as well. To allow right click in desktop browsers to respond normally (for a context menu etc) then you can modify the following line within the “_start: function” block:

    Change this: if ( !that.enabled ) return;
    To this: if ( !that.enabled || e.button === 2 ) return;

    Cheers,
    George

  88. Hi,

    I have divs within the scroll, which all works, but those divs have a button in them, i cant press the button anymore.

    Any ideas how to fit it?

  89. Just a suggestion, but I think iScroll would do well to follow the direction of modern polyfills. That is, to detect “overflow: auto” “overflow: scroll” and “position: fixed” and implement them on the iPhones/devices that don’t have them natively. This would make iScroll even more a gem when iOS5 comes out.

    Polyfills like CSS3Pie and Selectivizr gain a lot more traction then having to do explicit JS calls and structure markup a certain way.

    1. it’s something I was thinking about, but it’s actually too dangerous to blindly apply iscroll to all overflow:auto/scroll.

      iScroll (such as all JS scroll views) is an hack, must be handled with care.

  90. Hi Matteo,
    first thanks for the good work and for sharing it with us. Everything works as espected, but i when i scroll down it keeps pulling me back to the top. I tried implementing the loaded function with timer as said before but i cant seem to get it working. Any idea on this? WHere it might go wrong?

    Thanks!

  91. When I use this script and create “index.xhtml” file it works on android and iphone devices…
    and when I try to write xhtml to screen like below it is working on android but not working on iphone devices..
    Do u have any idea about this problem?

    Thanks…

    byte[] bytes = xhtmlScreen.getBytes(“UTF-8”);
    OutputStream outputStream = response.getOutputStream();
    outputStream.write(bytes);
    outputStream.flush();
    outputStream.close();

  92. When I got pictures inside the LIs, the scroll in iPhone is quire slow, without pictures the scroll is very smooth, anyone get any suggestion?

  93. Hi,

    great work, but your Pull to Refresh Demo isn’t working on my iPhone and I can’t get it to work on my pc.
    And apparently, this method isn’t implemented in iScroll v4.1.2. I can’t find it in your code. It’s just not there.
    Any ideas?

    1. “Pull to Refresh” demo didn’t work with me either. Seems there is something missing.

  94. how can I use snap option only for vertical scrolling?
    i dont want my “container” to snap back when pulling up and down

  95. i’m really glad you share that with us, great.. i’ve just one problem today:
    i have paragraphs which are “contentdeitable” in my scrolling div. i use iscroll
    for ipad2. before i added iscroll the contentediting worked and now i added the
    iscroll and this works also very good, but prevents the paragraphs from being “content
    editbale”. i suppose the reason is that when i start “touching” the paragraph, the iscroll
    skript prevents my code from working because it fires a “go and scroll :-)”.. has anyone an
    idea to work around? can i prevent iscroll from beeing startet when touching a special area like
    the paragraphs??
    thanks a lot

    1. ok i got this fixed by destroying the iscroll object while editing and build it again after editing:-)
      another question I have now: Is there a way to have the Srollbar draggable when using on non-touchdevices? As its not that usable to “kick the content on” with the mouse-cursor????

      Thanks

  96. It’s a nice piece of work, however I wish it could work on the iphone lockscreen itself since i am developing the lockscreen that responds to touch. Your code works fine on webapp but the css overflow: auto code seems useless when it comes to lockscreen.

  97. On Android, I have “” type structure. On tapping in textbox and typing, word complete feature shows up initially. But when scroller area is full and scrollbar (using only vertical scrolling) appear, word complete div does not show up. Only input and softkeyboard appear.

    It appears like scroller area being too much is preventing soft-keyboard from taking up extra space for word-complete div. Not sure which default event for word complete is being overridden in iscroll.

    Any help is greatly appreaciated!

    1. This problem does not appear with new release 2011.07.03 – v4.1.7. Probably it was due to enter keypress not going through.

      Thanks for this great script! 🙂

    1. I fixed the orientation issue but now ajax refresh is causing it to bounce back to the top. Can someone please look at this and offer a solution?? I am willing to pay for a fix.

      Dave

    2. Did someone fix the orientation issue? When I turn the iPad the scolling starts to work. If you have a fix please post how you fixed it. Thanks

      1. Nevermind, the timeout fixed it.
        var scrollContent,scrollNav;
        function loaded() {
        setTimeout(function () { scrollContent = new iScroll(‘contentWrapper’, { zoom: true }); }, 100);
        setTimeout(function () { scrollNav = new iScroll(‘sideWrapper’, { zoom: true }); }, 100);
        }
        document.addEventListener(‘touchmove’, function (e) { e.preventDefault(); }, false);
        document.addEventListener(‘DOMContentLoaded’, loaded, false);
        window.addEventListener(‘load’, setTimeout(function () { loaded(); }, 75), false);

  98. New scroller is more laggy than the old one. I have been using the iScroll 4.0 beta 4 on my application since a few months. It’s quite a big project. I’ve tried to use the new release now but it’s damn laggy on the phone. Not usable!

    Maik

  99. Hi,

    using iScroll v4.1.6 on FireFox prevents any input/textarea element from beeing clicked (no focus).
    On iPhone .focus() doesn’t work. Any ideas?

  100. Hi, Matteo!
    Thanks for your work! … it works great!

    I was trying to use classes (.wrapper and .scroll) instead of divs, but I don’t know how to get them work.

    It would be great if you can help me.
    Thanks! 🙂

    1. I’m also looking for an up-to-date solution for this problem. I would be super grateful if anyone can help or post a straight forward code example for this.

      (p.s. I don’t mind paying for the solution – contact me if interested).

  101. Now that iScroll 4 is around for a while, could some time be scheduled to all the outstanding issues on the spinning wheel?

  102. iScorll 4 is simply great. You should implement a combination between the scroll and the carousel, which would enable developers to easily make a gallery similar to the photos app.

  103. First and foremost; iScroll is slick and works flawlessly (well almost) on the iPad2. I can’t give enough props to Matteo on creating such an indispensable tool.

    Now to the almost: In iScroll 3 there were user solutions to remove selects and inputs from being blocked. Is there a solution for iScroll4?

  104. ‘examples/form-fields’ still doesn’t solve the .focus() issue. You can’t set focus() via JavaScript, e.g. onclick. Only destroying the scroller seems to work.

  105. I’m developing a webOS PhoneGap application and it wouldn’t scroll at all. I added this script and now it scrolls, but it always snaps back to the top when I let go or when my finger drags into the header div. is there something simple I’m missing?

  106. iScroll is not working with jquery mobile. can anyone suggest how to fix the problem. or give me a sample example for iscroll+jquerymobile. thanks in advance.

      1. I am having problems implementing iscroll 4 on a jquery mobile site/application. Do you have any recommendations or any instructions you could share? I would greatly appreciate it.

  107. Never mind. I found your iScroll 4 Beta 3 on Github and added the PullToRefresh method to iScroll 4.1.6.

  108. Srry guyz, but i cant make this to work.. 🙁

    everytime i scroll down and release my container div scroll back to the start point, i mean, if i scroll to pretty line number 30, when release im back to pretty line 1.

    i didnt change any code. 🙁

  109. iScroll is great, but I’ve a suggestion on its sensitivity while “snap” is turned on.

    As an end user, the iScroll is triggered to go to next page when my finger pressed & moved for 1-2 pixels. It would be great if it is configurable for developer – Say if user moved only 10 pixels, abort bounce it back until the user move more.

  110. Hello~
    thanks you for your project.
    iscroll has helped me a lot these day.
    but,something confused me now.
    if the user drag the page very fast,the browser does not render the dom in time.so I want to limit the scrolling speed,how should I do?

  111. The code is commented as
    Version 3.7.1 – Last updated: 2010.10.08

    Is this the latest release code? Or there is a version 4?

  112. I have to say first of all that iScroll Is great!!

    I do wish to solve a couple of problems and maybe you guys can help me.

    1- I want iScroll to automatically scroll on the images that are contained in it until the user does tap or click on the scroll. I found some users just don’t know that they can interact with it.

    2- (This one would be awesome but is just like a challenge) I have tried to fade in the “next” image and fade out the “active” image on dragging without luck. What I tried was building a function to change the opacity to 0 while the active image is dragged to any of the corners and animate the opacity of the upcoming image to 1.

    Any ideas would be greatly appreciated and thanks again for this amazing piece of code!!

    Cheers!

    J.

  113. I liked the plugin and I think you can still improve it.

    When I use it in IPhone it works though if the page has form elements like textboxes, the whole page with header moves up when we click the textbox to write something in it. This is because keyboard has to be up with the textbox focused but I know with iScroll you can find a workaround for this too anytime soon.

  114. Your scripts are the best! You can check out two of them in use by clicking my name.

    Do you or anyone else know of a good modal dialog that work well with your iscroll 4?

    thanks

  115. Have anyone figured out a way for iScroll to work in ie8? I get a stuck scroller on ie8. It works great on ie9 but not in ie8. Any advice or comments are welcome.

    I also want to know if it’s possible to make the iScroll with the snap option on, scroll automatically while there’s no interaction. Like a slider. See this page:

    http://www.apple.com/ca/imac/

    This, and that it works in ie8 could open up huge opportunities for iScroll to be an amazing saving time tool in cross browser optimization and one layout development for all devices.

    I do have to say that is an amazing tool until this point but this improvements could make it huge!!!

    1. auto scrolling can be achieved with a timer. IE8 compatibility would be possible, but not top priority (basically use attachevent instead of addeventlistener).

      1. Thanks Matteo!! That can give an idea of how to experiment in ie8. I let you know any progress.

        In the other hand, Could you let me know how a simple slider would work with the timer?

        Thanks!

    2. Found the solution to make it an automatic slider. Thanks anyway¡

      Still trying to make it work in ie8. Any hints still will be appreciated.

  116. Had a lot of trouble with this. Here’s what finally worked.. This went in my header:

    var myScroll;
    function loaded() {
    myScroll = new iScroll(‘icategories’,{
    scrollbarClass:’myScrollbar’,
    checkDOMChange:false
    });
    };

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

    Then I just appended an onClick request to the a/href button that requested the div:

    onclick=”setTimeout(function(){myScroll.refresh()},100);”

    1. Could you specify what was the initial issue? I’m kind of lost here. I’m wondering if it’s a reply to a previous issue I haven’t check. Thanks!

  117. Anyone been able to create a circular – wrap version of the carousel? Meaning the carousel would automatically continue when it reaches the end?

    1. I guess you mean the spinning-wheel.

      I got it working but maybe a nasty solution.
      Instead of feeding the data to scroll once, I feed it 3 times per wheel. I will scroll only the middle section of the three. Whenever I scroll over 1/3rd or 2/3d, I substract or add 1/3rd of the height. So acutally I am jumping the wheel from 2/3rd back to 1/3r and you won’t notice.

      A better solution would be to let the user its data once, and triple it inside the script and then handle the middle part.

      At fast scrolling you can see that the wheel moves the other way as expected due to the calculations limiting to 1/3 and 2/3rd of the triple valued wheel.

  118. Hi, I have problem with two scroll on the same page. They have different id but only one of two works…thanks for any suggestions….

  119. What’s the best way to implement a memory managed carousel like the one found on playboy?

    I have a large list of 50 items. These are list items with simple images in them. It runs well but I know it could be improved by only ever having either 5 or 7 items in the scroller like how Playboy works. 3 before and 3 after the current page. The problem I have is that as I use onScrollEnd to add one item to the end of the list and because I also remove one item form the begining the page skips ahead by one.

    Has anyone ever tried doing this and what’s the best way to achieve what I want to do?

    Any help much appreciated.

  120. I try to use iscroll4 with jquery mobile ‘s dialog on ipad. Currently it has scroll action but i want scrollbar to display and content not scroll back to origin position.

  121. This does not work with Androids latest Firmware update. Android users will experience lag. Works perfect for iPhone like most things! Thank you Apple for making a solid device.

  122. Does iscroll 4 have “scrollStart” and “scrollEnd” callnbacks?

    How can I know scroll starts and ends?

    Thank you
    Niz

  123. When you scroll to very top or bottom, it bounces and the scrollbar height becomes smaller. It works on iPhone. But doesn’t work on Android. I would love to have a fix that will work on Android and Blackberry. Thanks.

  124. Thanks for this great script.

    Is there a way to implement an iScroll enabled horizontally scrolling div that will allow a user to swipe up and down on it and cause the whole page to scroll vertically? I’ve got a page set up with the iScroll container which has a height of around 250px scrolling left/right wonderfully, but if I swipe up/down on the container, the page, which is long, doesn’t scroll.

    Thanks again!

  125. Hi, I’ve struggled getting this to work on iPhone in conjunction with hiding the address bar on page load… all I succeed in doing is reducing the distance the script will then travel when scrolling…

    Any ideas? 🙂

  126. I’m seeing issues w/ the height of the container in Android. It seems I have to specify a very very specific height based on the device otherwise the last item in the list is not visible. has anyone seen issues where the list item in a list is not fully visible?

  127. Is it possible to show the original desktop os scrollbar ?

    I tried to set “that.wrapper.style.overflow = ‘hidden’;” to overflow auto, but when i drag to scroll the scrollbar gets stretched all the way from the top like the top is “stuck”, and when it reaches the end it just disappear.

    Btw, sorry for my bad english!

  128. And a second question, is it possible to vertically center a div inside #scroller?

    To position something by using % the div#scroller have to be top: 0, bottom: 0; but then it won’t scroll..

  129. I really like this script and plan on using it on the mobile version of my workplace’s site. I’m having an issue though, wherein the scrolling ends before the bottom of the page. It’s not a fixed amount either; it varies depending on the page. Any thoughts on what I might be doing wrong?

  130. @Matteo – Great work on this. I have to ask… Any chance you’ll be supporting WebOS 3.0 in the future so we can use this lib on the TouchPad? It doesn’t seem to work at present, even though the browser is WebKit-based and mouse events appear to function as expected. Not sure if you’ve already looked into this or not. There’s an SDK available, though the installed browser doesn’t quite work as well as the browser on the device itself.

    I’ve managed to utilize non-touch Drag/Drop features in MooTools in the TouchPad’s WebOS browser, for instance, so I know the mouse events themselves are working as expected. Any input you can offer up would be great. Thanks again!

      1. ..same issue here. it really does not work in webOS (3.0.2), even not using “useTransition:true” option. any further values to change/insert in order to get it working? would be a pity to have to use anthoer plugin just for 1 useragent 🙂 thx

      2. to be correct: the carousel does work but just by using the next/previous-button. swipe gestures seem to not be detected

      3. ..i suppose the problem is “webos-made”, if we read this:

        http://bit.ly/p8gv1L

        QUOTE:
        >>>
        Basically, the WebView/browser in 3.0.2 has the same issue that the 3.0.0 browser had. It looks to code like touch events are supported, but they aren’t dispatched. Touch events do work in webOS applications, but the interface to get them passed into the BrowserAdapter and dispatched to the second WebKit instance still wasn’t working right when 3.0.2 was finalized.
        <<<

      4. aright, just played with this for hours. so the webOS browser lets you scroll divs with overflow by default. so i found out a quick work around that at least gets things functional. in the iScroll demo, replace the header javascript with this:

        //==============================
        var deviceAgent = navigator.userAgent.toLowerCase();
        var webOS = deviceAgent.match(/(webos|hpwos)/);

        var myScroll;
        function loaded() {
        if (webOS == null){
        myScroll = new iScroll(‘wrapper’);
        }
        }

        if (webOS == null){
        document.addEventListener(‘touchmove’, function (e) { e.preventDefault(); }, false);
        } else {
        var metaTags=document.getElementsByTagName(‘meta’);
        for(var c=0;c<metaTags.length;c++) {
        if(metaTags[c].name=='viewport'){
        //webOS disables scrolling on divs when "user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" is set. so lets remove em'.
        metaTags[c].content='width=device-width, initial-scale=1.0';
        }
        }
        }

        document.addEventListener('DOMContentLoaded', setTimeout(function () { loaded(); }, 200), false);
        //==============================

        this completely removes iScroll and allows the webOS browser's default scrolling to take over. sadly, there's no momentum. also, when you use user-scalable, minimum-scale, and maximum-scale, it disables scrolling of the div for some reason.

        i thought there might be a way to use this to make a hack that tracks a scrolled div instead of touch events. but when I tested to see what sort of events were firing when webOS scrolled a div, 'mouseup' didn't fire and NOTHING worked that could be used as a 'mouseup' equivalent. the only events that fired were the 'scroll' and 'click' events. and 'click' only fired after holding down for what seemed like 200ms.

        so there you have it. a work around for webOS browsers until they decide to fix touch events. i have to say… it's pretty weird that webOS enyo supports touch events, but not the browser.

  131. if (that.maxScrollX%that.wrapperW) that.pagesX[that.pagesX.length] = that.maxScrollX
    – that.pagesX[that.pagesX.length-1]
    + that.pagesX[that.pagesX.length-1];

    what is this? who wrote that? -)

  132. Thank you so much for the great code and documentation. I am really struggling with automatic refresh upon DOM change. I know this is a known issue, but was curious if you had any work around as of right now. My project uses multiple carousels so I am using ajax to load them in to the scroller . I just cant seem to get it to refresh. My project can be found at http://www.hrinoc.com/webapp.

    Thanks again for all your hard work.

  133. Hi,

    I believe this page needs to mention that the following style definition is essential for the wrapper element:

    style = “overflow: auto;”

    Without this style definition, the wrapper element won’t work properly.

    Mark

  134. First Off, I would like to thank you for putting together such an amazing script. It makes my life a lot easier. I do have one question however:

    I would like to make my iscroll start scrolled down to hide an element at the top of the list; similar to the search bar on the top of a song list on an ipod touch/iphone.


    // Here I have tried to add the topOffset parameter and it has not changed anything
    myScroll = new iScroll('container_inner', {desktopCompatibility:true,topOffset:30,useTransition:true,});

    // I have also tried this, but it still shows the top element for some time
    myScroll.scrollTo(0,-35,0);

    Do you have any suggestions?

  135. One note to people having the effect where the pane scrolls back to the top immediately: i fixed it by giving the ‘wrapper’ or ‘scrollwrapper’ a fixed height and the ul ‘auto’ height. Whenever the ul has a fixed height iScroll apparently thinks no scrolling is needed and the scrollbars do not appear.

    1. @HEY Thanks a lot man 2 hours I had the effect where the pane scrolls back to the top immediately!!! You solution solved it for me also…

  136. I have a bug in Chrome (for testing):
    First, the content is scrolling alway to top. Untill I call a refresh(). And then it scrolls normally when I ‘throw’ the content, but if I scroll, stop, and release it scrolls to the top!
    Any idea?

    1. Ok the refresh work only when the wrapper is not in a display: none element.
      I have an app with several carousel style pages. The page with iScroll element is displayed later when the user select some option and arrive to this page.

    2. They have been providing excellent work in this field and that is the reason they are the preferred choice of people

  137. Hi, first off, amazing script, works great. However, there’s a slight problem on my website (http://m.vancouverislandlife.com/) where, on pages whose content does not overflow the page, it allows you to scroll down past the bottom of the page and you can’t go back once the entire page is out of sight. On pages that do overflow the available area (Accomodations > b&b’s) it works as expected. If this is a problem in iScroll, can it please be fixed?

    Ryan O’Hara

  138. 2 questions.

    1. Can I pass more than 1 feature on a single DOM page? Say a snap to elements and pull to refresh? If so, how do I set it up in the js ready(); ?

    2. Will there be module or plugin available for Joomla in the near future?

    Thanx this is a g8 tool to help me build my iPad app.

  139. IE8 – Does not appear to work in Internet Explorer 8.
    I get ‘myScroll’ is null or not an object’
    The script works in IE9.

      1. IE 8 support is still important. There are a lot of PCs out there still running Windows XP, and they can’t upgrade to IE 9. I have tried inserting a fix for add/removeEventListener(), but there seem to be other issues with scroller positioning and display.

        Anyone worked this stuff out yet?

      2. Don’t get me wrong. I wish MS would eliminate all previous IE versions and force people to use most current browser. However almost 70% of online users visiting my sites are using ie8, so I can’t use iScroll4, which is an absolutely perfect plugin.

  140. Great work! Was a nice and easy way to launch a mobile version of thesongstack. Works great for iPhones, however I still can’t get it to work on any android devices. Probably something wrong with my javascript…

  141. I have a code using iScroll. It works PERFECTLY as it should in iScroll 3, but iScroll 4 shows no sign of working. 🙁 Anything you think I’m missing?

  142. This is a nice solution – thanks – and I have it working in my project (a web app for ipad). However, I’ve noticed that all the text on any page which involves iScroll is slightly blurred – that’s any text, not just the text in the scrolling .

    Am I missing something?

    1. … actually, all the content on any page which involves iScroll is slightly blurred when compared to pages which do not use iScroll which are crisp.

      1. I would like to use iScroll but I’ve searched the various discussions on this blurring subject and none of the suggested fixes work.

        Can you help at all?

  143. I have improved the mouse wheel behaviour, so you can use the parameter vScrollbar: false and show the scrollbar indicator.

    Change the line 646:


    that.scrollTo(deltaX, deltaY, 0);

    to:

    that._pos(deltaX, deltaY); //MYCODE
    that.options.timeEnd=setInterval(function(){ /*MYCODE*/
    if('wheelDeltaX' in e&&e.wheelDeltaX==0){
    that._end(e);
    clearInterval(that.options.timeEnd);
    }
    },100);

  144. Hi there,

    Does this awesome scroll lib work with IE7 & IE8.. I personally don’t prefer IE for anything but my site analytic’s shows some IE viewers as well.

    I did some tests but IE8 throws error( Object doesn’t support this property or method Line: 818 Char: 3 Code: 0 ). I did all tests on my desktop.

    Thanks,
    Amit

  145. I have a site thats almost entirely reliant on forms and checkbox elements. Any news on when the incompatability with that will be repaired. Its such a cool script I really would like to use it with my site.

    Cheers Archie

  146. Hi,

    Thanks for script. Is fix some of my porblem. But now i facing another problem.

    After implement the touch-scroll.min.js my slideshow doesnt run so well in the page. The whole page is moving when the slideshow running. The browser is run well but except mobile devise.

    Any idea of this issues? Hope someone can help me!

    Here is the my beta link: http://senedi-wip.com/cari/beta/ipad.html

    Thanks.

  147. Hi, I have one problem within using iscroll4.Can it work when the page is so large and must be scroll in x and y?

  148. Hi!
    I’m facing very odd issue with your script in Google Chrome (latest stable version on win7 x64): page elements are no longer highlighted in the browser when you hover on them in web inspector’s Elements tab. Ubuntu version is fine.

  149. Hi

    I tried the new Version, but now iscroll doesn’t work correctly anymore.

    Is it possible to have muliple divs in the wrapper to scroll togehther.

    Example:

    It worked with the previous version of iscroll, so what can I do?
    Thanks

  150. Is there any call back function like ‘onEndScroll’ is available in Iscroll? I want to implement pagination by using Iscroll or Iphone.

  151. Just a random comment about the questions i’m reading.

    iScroll was made for Mobile Devices. Normal (and standard) browsers mostly works but whoever is trying to make it work in IE’s should die.

    Really.

  152. I want to say, iScroll save my app on iPhone and iPad 🙂 , the performance is unacceptable in Android, but Android has property display:fixed , so I can fix the header & footer with it.

    For that thanks a million for this great project … I’m lovin’ it

  153. This script is just awsome, I really love it!

    For my project I have two question, I hope I am not overlooking the answers in the script, forgive me if I do, but here they are:

    1. I would like to disable the (finger)Pinch zoom and just use the tab-zoom, is that possible?

    2. If 1. is not possible, is it possible then to disable the content to be minimized when pinchzooming? I mean, there is a maximum of zoom, but is there also an absolute minimum so that the content is never showed smaller than original size?

    Thanks in advance!

      1. Thanks for the fast reply Matteo!

        I will play around with the script for now.
        If I find a clean way I will post it.

        And otherwise I will be there for the update!

        Keep up the great work!

  154. Is there a method to change the height of the scroller after i have ran “new iScroll(‘someWrapper’)”?

    The contents of my scroller are dynamically changing, so the height is not always the same.

    Thank you

  155. I am using iscroll 4 on my website and I want to use carousel but it’s not working out for me. It works just not how I want it. The background images for each item are overflowing the rounded corners. How do I make them not overflow without making each of the images rounded?

    Here is my CSS Code:


    /*iScroll*/
    #wrapper {
    width:300px;
    height:100px;
    position:relative;
    z-index:1;
    overflow:hidden;
    background:#fff;
    border:solid 1px #878787;
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
    -webkit-border-radius:8px;
    border-radius:8px;
    }

    #scroller {
    width:600px;
    height:100%;
    float:left;
    padding:0;
    overflow:hidden;
    }

    #scroller ul {
    list-style:none;
    display:block;
    float:left;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    text-align:left;
    overflow:hidden;
    }

    #scroller li {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    display:block;
    float:left;
    width:300px;
    height:100px;
    text-align:center;
    font-family:georgia;
    font-size:18px;
    line-height:140%;
    overflow:hidden;
    }

    #scroller li img {
    position:relative;
    margin:0;
    width:300px;
    height:100px;
    overflow:hidden;
    }

    #nav {
    width:300px;
    margin-left:auto;
    margin-right:auto;
    }

    #prev, #next {
    float:left;
    font-weight:bold;
    font-size:14px;
    padding:5px 0;
    width:80px;
    color:rgba(0, 0, 0, 0);
    }

    #next {
    float:right;
    text-align:right;
    }

    #indicator, #indicator > li {
    display:block; float:left;
    list-style:none;
    padding:0; margin:0;
    }

    #indicator {
    width:110px;
    padding:12px 0 0 30px;
    }

    #indicator > li {
    text-indent:-9999em;
    width:8px; height:8px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -o-border-radius:4px;
    border-radius:4px;
    background:rgba(255, 255, 255, 0.5);
    overflow:hidden;
    margin-right:4px;
    }

    #indicator > li.active {
    background:rgba(255, 255, 255, 1.0);
    }

    #indicator > li:last-child {
    margin:0;
    }

  156. Great work!

    Anyway, I would like to capture the the current scroll position, is there an api method to do that?

    Thanks

  157. When the user hits the back button I would like to restore the scroll state, that is why I ask.

  158. grande plug in … ma vorrei vederlo solo con ipad e sistemi mobile come posso fare !!! ‘ scusa ma non sono un bravo programmatore
    un link o tutorial ?!!!
    grazie

  159. is there a list of what apis have changed from 3 to 4? I tried to drop in 4 and it is no longer working. I have a fairly large program so i might be nice for me to see what apis have changes so that we can track down why it is not working

  160. I managed to fix the issue which prevents some form elements from being focused by adding a line of code at the top of the _start function:

    if ( e.target && /INPUT|TEXTAREA|INPUT|SELECT|A/.test(e.target.tagName) ) {
    return true;
    }

  161. I noticed an error in the code I just posted… the ‘INPUT’ tag should only be checked once:

    if ( e.target && /INPUT|TEXTAREA|SELECT|A/.test(e.target.tagName) ) {
    return true;
    }

  162. Thanks Matteo Spinelli writting this prowerful Javascript lib. I have used this lib in my iOS and Android project perfectly, thanks again!
    By the way, is it any idea to make a looping scroller just like some movie website recommend ? I means when I scroll to the end, the begin part auto follow the end, to a no end looping.
    Look forward to your reply, thanks.

  163. Works very well, except on IE. It would be nice if the scroll bar would be working on IE at least.

    Best,

    1. it works on IE .. catch the version of IE, if below or equal version 8 you need to setup the event listener like this:

      document.attachEvent(‘touchmove,’, function (e) {
      e.preventDefault();
      }, false);
      document.attachEvent(‘DOMContentLoaded’, loaded, false);

  164. Did not work if scrolling div has fixed height.
    I mean, my div has 320px height and scrollable height is 420px. iscroll4 scrolls only visible area (first 320px) and anything between 320-420 still hidden.
    Any workaround ?

      1. Yes, you’re right, i take my wrapper inside scroller div and styling issues fixed.
        Thanks for quick reply.

  165. In a frame set, touch area is not same with content’s location. How can I make these same?

  166. hi,
    i am new to iscroll and jquery.I want to develop a web page.Can anyone help me how to implement lazy loading using the above two techniques.
    thanks in advance.
    regards,
    yuvaraj.m

  167. hi,
    i am using tapestry 5 instead of html,and tried to implement lazy loading using jquery.It works fine in desktop browsers but not in iphone.So, i implemented iscroll to make work in iphone.After implementing iscroll lazy loading not works.

  168. Hi, is there a way, only display scrollbars near scrolling div. I want to scroll only that panel, and when thats scrolling, the scrolling div will scroll too. (just as normal scrollbars)

    1. If I understand your question correctly you want the iScroll scrollbars to appear by the div you are scrolling rather than at the bottom of the screen? If so, add a “position:relative;” to the div you are targeting with iScroll. That solved it for me.

  169. I’m impressed by the work that has gone into this. Question on carousels: I only want horizontal swiping to trigger the carousel. I want vertical swiping (even if the swipe gesture starts within the carousel) to scroll the entire webpage vertically. Right now it appears that a vertical swipe, initiated from within the carousel area, is being handled within the carousel even with vScroll:false set. Any way to get vertical site scrolling normally using iScroll?

    I know it’s technically possible in that apple does it on their site. But of course they are using an entirely different method I believe.

    1. And now I feel bad, this has been answered well in the discussion group. Code is:

      $(document).ready(function(){
      var myScroll = new iScroll('hero_carousel',
      {
      snap: 'li',
      momentum: false,
      hScrollbar: false,
      vScroll: false,
      onBeforeScrollStart: function(e)
      {
      point = e.touches[0];
      pointStartX = point.pageX;
      pointStartY = point.pageY;
      null;
      },
      onBeforeScrollMove: function(e)
      {
      deltaX = Math.abs(point.pageX - pointStartX);
      deltaY = Math.abs(point.pageY - pointStartY);
      if (deltaX >= deltaY)
      {
      e.preventDefault();
      }
      else
      {
      null;
      }
      }
      });
      });

    1. Hi Sergey,
      I’m having the same issue with hiding the address bar. Can you please post your solution with adding an additional wrapper and dynamically setting the height?
      Thanks,
      Andrew

  170. i am using iScroll in naquisimo.com but sometimes the scroll doesn’t work or works partially it didnt scroll the 100% of the wrapper height… i think that its because the load of some social plugins like facebook and google+ do you have any idea?

  171. Has anyone had any issues using iScroll (particularly the carousel example) with dynamic content pulled from a CMS? I am attempting to set up an ‘out of the box’ example using ExpressionEngine to dump images into a simple iScroll carousel. It seems to have trouble defining the end of the list. In the beginning the ‘active’ class works on the nav dots, though when you scroll to the end, the scroller box attempts to look for one more slide. After that, the ‘active’ nav class isn’t working (gray dots do not become dark gray when active in the scroller box) until the page is reloaded. I tried adding back the static nav list with a defined number of image entries and the problem persists. Any thoughts as to why this might be happening? Other than that, this thing is amazing. Thank you!!

  172. hello,
    i have a “time-position-delay” (?) issue with iscroll! i use helper:’clone’ and appendTo:’body’, otherwise the draggable is hidden because of an overflow hidden. everythings works well in firefox! in safari and chrome the draggable-clone starts to appear and drag from the left top corner of the body instead of from the original position of the dragelement!
    WHAT DO I DO WRONG?
    ({cursorAt: { top:0, left: 0 }}
    and { refreshPositions: true } did not help

    THANKS FOR ANY HELP

  173. Anyone had problems with jerky Android scrolling?

    Implement this, and things will scroll a bit smoother (but still not perfect as on iOS):


    var preventDefaultScroll = function(event) {
    event.preventDefault();
    return false;
    };
    document.addEventListener('touchmove', preventDefaultScroll, false);

  174. I have a scroll wrapper, and within it are multiple divs containing content, only one of these divs is visible at one time, and with, simple js shoe/hide of the divs, the scroll no longer works on that wrapper …. is this even possible?

    So all content is loaded and works fine, the divs content is not reloaded, just revealed, it is frustrating the hell out of me. 🙂

  175. None of the demo’s work on HP Touchpad. Are there any examples of multi-touch JS/HTML/CSS working on the Touchpad?

  176. A lot were recently sold. It would be interesting to see if something can be made for the HP touchpad. I’ll see if I can create something. I have a device to test it on.

  177. Hi,

    Is it possible to scroll one tall image rather than text? I can’t seem to get it to work.

    I’ve tried using and for the image – which is 1600px high – in a DIV which is 500px high.

    It scrolls in Chrome/Safari, but not yet in iScroll …

    Thanks

    Paul

      1. Thanks for the prompt reply. I’ve tried adding a tall instead of text items in the ‘simple’ example in the download zip, but it doesn’t scroll on an iPhone either unfortunately. (I’ve made sure both dimensions are clearly specified too)

        I’ll try again tomorrow, but if you have any ideas / example of it working I would obviously be grateful.

        Paul.

  178. Absolutely fantastic work! As a student / freelance designer, this will come in handy for my projects and I will happily inform you of my work and my users of yours!

    I really look forward to the tools that you create in the future! 🙂

  179. Hi all.
    I have some problem with iscroll on my project:
    When i used : “useTransform: false” property, it made my content exceed than device-width ( iphone, ipod)

    When ajax called, many appear and iscroll don’t scroll all page

    Pls help me. Thank more !

  180. Thank you so much for your work.
    My question is :

    If I have an iScroll4 (son) in another iScroll4 (father), how can I disable scrolling in the iScroll (father), when user is scrolling in iScroll (son) ?

    Tks for answer, and thank you agin for iScroll

  181. Awesome work! Thanx.

    I have embedded:
    myScroll = new iScroll(‘wrapper’,{
    snap: true,
    momentum: false,
    vScroll:false,
    hScrollbar: false,});
    }

    In this URL: http://m2.vladi.de/I/?993

    If I wipe verticaly I expect that I can scroll the page. But nothing appears.

    Objectiv:
    horizontal wipe = iscroll
    vertical wipe = page scroll

    How can I realize?

    Best regards from Hamburg
    Rainer

  182. I have multiple panels require iscroll in same page. In this case only 1 panel is able to scroll.

    If i use different id then it does not work.
    i used following code

    Any help?

  183. ther is a big problem embeding youtube videos: it doesn’t work 🙁 on Firefox, the video is outside of the scroll, on Chrome, it’s at the end of the scroll, it works fine only in IE…
    example: http://www.pudlowski.net/mw/
    There are many discussions about this on the net, but no one seems to have found a solution…

  184. Hi,
    Thanks for the great plugin 🙂
    Quick question.. How would I go about allowing the ScrollTo event to run, even when hScroll is false? I don’t want users to manually scroll horizontally, but I do want to slide across using ScrollTo. Is this possible or am I asking too much?

  185. I cannot scroll 100% of content. It’s like a part of content is outside the scroll area and i can’t scroll to it. Do you know what does cause this?

  186. I’m having issues with an iScroll implementation when the viewport is zoomed in (not with iScroll zoom). I am implementing a horizontal scroll and iScroll seems to be calculating the lateral boundaries as the true 1:1 of the page, disregarding the viewport scale.

  187. iScroll cause my app to pixelate if the page is long on iPhone/ iPad . The page has a mix of other animation, but do u have any idea what may cause this ?

  188. Great works guys, bu I do have a problem. I am using iScroll to scroll wide tables horizontally on a mobile design (to avoid squishing them into a small screen). This works great, but it prevents vertical scrolling of the PAGE when swiping vertically on the tables.

    Any ideas anyone? Cheers

  189. Matteo, you have been a life saver. Thank you for your amazing contribution.

    I wanted to let you know that with iOS 5, I am not able to enter values into form inputs. This has not been a problem in iOS 4.

    1. I’m aware of the issue. I’ll look into this as soon as possible. The iOS5 final has been seeded to developers just few days ago and couldn’t find the time to play with it.

    2. line 95 this fix it until matteo release version :

      onBeforeScrollStart: function (e) {var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase():(e.target ? e.target.nodeName.toLowerCase():''); if(nodeType !='select' && nodeType !='option' && nodeType !='input' && nodeType!='textarea') e.preventDefault(); },

      1. Matteo, awesome tool. Bastien, thanks for the fix, my current head-banging session has come to a close.

  190. I can enter values just fine with the fix from before but my problem now with IOS 5 is that when the keyboard moves into position and shoves my panel up, after the keyboard goes away I cannot scroll the content down.
    The content is still scrollable but the area below the scrolling area is pushed up and I cannot get it to move down.

    I have to go back into the field and use Previous button to force the field up again which shoves my panel up to the top too.

    Not sure if there is a way to force the refresh or something (scrollTo 0,0?) after the keyboard is hidden.

  191. Any news on form elements? Just upgraded to iOS 5 on my ipad and now my form does not work inside of iscroll 🙁

    works in webkit desktop browsers if you right-click mouse or use keyboard tab. Not ideal though.

    Love what you have done though – may just have to rethink contact form until the updates are through…

  192. Matt,

    Need quick help from you. I had implemented iScroll for a table to enable horizontal and vertical scrollbar for that table alone. Inside tag , javascripts like onClick() to open calendar, select button and button are not working.

    Any ideas??

    Pl help 🙁

  193. Hi, I have an issue on the Ipad. I got scrolling after AJAX. I called refresh() right after loading. When I push the scrollable area up or down with the touch it goes but then it bounce back to the original screen position…not the effect I want…any help ? thanks

  194. my problem is some interesting.

    i used jquery.mobile.scrollview.but it has a problem. its slow.

    i used to iscroll. but it has a problem too.
    its input or textarea or select object is readonly :(. please , help me. how can i do readable when i use iscroll. thank you already

      1. Hi, im having the same problem, but i did notice that if you right click on the textarea you can edit it, not that it is readonly, i think iscroll4 removes focus clicking on the elements which includes the textarea

      1. onBeforeScrollStart: function (e) {
        var target = e.target;
        while (target.nodeType != 1) target = target.parentNode;
        if (target.tagName != ‘BUTTON’ && target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’)
        e.preventDefault();
        },

    1. Thanks a lot for superb script.. 🙂

      Now, my script of hiding ‘Address-bar’ is not working.
      Onload of Body i m using following code..
      setTimeout(scrollTo, 0, 0, 1);
      Please suggest me…

    2. onBeforeScrollStart: function (e) {if(e.target.tagName!=’INPUT’){e.preventDefault();} },

  195. This is really great, great script and thanks Matteo for that, but unfortunately i can’t use it on my new project and i am really, really pist off and angy cause of that. This is rocket science for shitty, fuckin IE, aah, should be forbiden by law. People stop using it!

    1. I’m using it with IE without any problems.
      Nested 2 iscroll for 2 different directions.

      Only browser that don’t work very well is Opera, since the lack of HW acceleration. Even O12b has HW acc but it doesn’t work satisifying.

      1. ANy hacks needed for the js or the markup in calling the script to avoid undefined errors, and object not supported?

  196. looks good! But i also likes to know how i can preserve native page scrolling in vertical direction when the user tabs in the iscroll area.

      1. The solution you are looking for is on page 6 of these comments, posted by a user called “Gordon”. 🙂

  197. Hi,

    I used your example above on a client’s website to try and fix a scrollbar bug we had with the site when viewing on an iPad. In Internet Explorer 9 it caused the entire site (bar the main nav and footer links to disappear after 3 seconds. Very strange. I have since removed this script from the site and suggest its something you look at.

  198. Strange thing, and I noticed you say you have “form issues”, but when I have the iScroll moving an area, the form boxes inside it (ie. input type text and checkbox) do not respond, yet other click events do.

    Is this the problem you refer to?

  199. Hi, Im’ having strange issue using a vertical scroller with snap.
    On iPad iOS4, everything works perfect, but when a target to iOS5, the snapping which I’ve setup to ‘li’ doenst work. I pull down but the scroll back where it started.

  200. iScroll is just great! And I mean the entire experience, the script, the quality of the code, the license and the description on your website. Many many thanks!

  201. Thank you for this, this is one of the most useful scripts a mobile web developer can use, without having to download a huge mobile library!

  202. This is a great library. I use it for just about every project.

    Is there something in the API that would allow a user to scrollTo next/previous pages based upon the current position and the snap attribute?

    1. I found it.
      just replace x / y with ‘prev’ / ‘next’
      scrollToPage(x,y,time);

      Although this will skip a partially shown element within the scroller.

  203. Thanks for iscroll. It’s a wonderful script.

    I have a “noob” question: What is the best way to disable/enable the scroll (touch or drag mouse) in javascript ?
    example: a carousel of images. When I click on an Image, it’s replaced by a video. If I don’t disable scroll, I can’t use the videoplayer (If I try to drag the video slider it will scroll the carousel instead)

      1. edit: still have a problem : with iscroll disabled, i still cannot use player interface (it’s a youtube iframe)

  204. Would it possible to have a div tag that would allow for the text to be highlighted by a mouse dragging over it with the left mouse button down. As of now, you never can select the text. Let me know if you need a little *help* for your troubles 😉

  205. when implementing iscroll3.7 i had problem with input field not editable. i fixed that issue. now when the input field is focused and the keypad in iphone opens up once i’m done entering the value in the textbox and press ‘done’ in the keyboard, Key board disappears but the header is not resetted to the same place.
    Im using jquery wrapper and jquery mobile along with the iscroll. Can some one help me out with this issue ?

  206. Hey there,
    I use iscroll as a pager with page-indexbuttons:

    (onclick=”contentPager.scrollToPage(0, 0);return false)

    But I have an issue: If I click on another Pageindex BEFORE the current scrolling stopped, the pageposition freezes anywhere in the middle. Is there a setting to prevent this?

    THX

    1. ok, I found the answer myself: I now use the isReady() method to ask if its true when clicking on a pagebutton

  207. Love this project – so brilliant for beginner web app developers like me.

    Couple of questions if yourself or people have time to answer?

    Is it possible to nest a horizontal scroller (like your snap to element example), with-in a vertical scroller? If so you do you know of any examples where I can look at the script and source.

    If its impossible, can you let me know thanks – other wise I may be forever trying lol

  208. Hi.
    Is there an easy way to do “infinite” (looping if you prefer) scroll with iscroll ?

      1. Thanks.
        Swipeview Demo looks awesome on my mobile but doesn’t work on my computer (no scroll at all). I know Swipeview and iScroll are made for mobile but iScroll is so great on mobiles and computers (except on IE) that I used it for both.

  209. Infinite scrolling.
    Iscroll has more more power then swipe view.
    If you want to achieve infinite scrolling:
    1) Create a method called immediateScrollToPage and copy scrollToPage Changing the last line with: that.scrollTo(x, y, 0);

    Then
    onScrollEnd: function () {
    if (doNothing) doNothing=false;
    else {
    if (myScroll.currPageX>1) {
    $listLi = $(“#thelist li”);
    $listLi.last().after($listLi.first());
    //IMMEDIATE SCROLL IS A CUSTOM EDITING OF ISCROLL LIBRARY TO AVOID THE 0 PROBLEM (if you put 0 is evaluate as false and default time of 400ms is fired)
    myScroll.immediateScrollToPage(“prev”,0,0);
    } else {
    $listLi = $(“#thelist li”);
    $listLi.first().before($listLi.last());
    myScroll.immediateScrollToPage(“next”,0,0);
    }
    doNothing= true;
    }
    }

    On load scroll to page2 at first if you want to go left immediatly.

    Thanks Matteo for your plugin.

  210. I’ve been stuck on this all day. How do I get a page that has a wrapper that is 300px tall to scroll properly on a blackberry that with a viewing screen 150px tall?

    1. “blackberry” may have been misleading.

      consider any mobile device. set a wrapper to ~200px taller than the device’s display and the width to 100%. how do you touch and drag to get the page to scroll down?

  211. When I use iScroll4 in my app, I’ve found that if the scroll area has a tag (hyperlink) in it. It will bounce back after the scroll down. It will be perfect if I remove the a tag. Is it a known issue?

    1. I’ve the same problem. A long list with DIV’s (formatted as a table). Per row DIV I have a onClick(). After scrolling down it will bounce back to it’s original state.
      I have the impression that the content (long list) is available, but iScroll doesn’t have it’s correct height (say zero). So it jumps back to it’s minimal display (coordinates 0.0)

  212. Hi!! Awsome tool !! I love it. Only one question: I have a full screen carousel, and a small scrolling div in the wraper…. The problem is when i try to vertically scroll the div and the finger slides just a little bit horizontally, the carousel will trigger the page swich.
    Is posible to add some event ontouchstart on the div to avoid the carousel movement ?

    Thank you !!!

    1. I found the solution, i added two events to the scrolling div to disable the carousel…… ontouchstart=”myScroll.disable()” ontouchend=”myScroll.enable()”

  213. Great script.. I wish it worked even on the new Windows Phone 7.5 (Mango), it would cover practically all mobile phones.

      1. I had a Lumia 800 for 5 minutes, and tried a mobile website I am working on (which includes iScroll 4). I was told that the engine of the mobile browser was that of IE 9 desktop, but obviously this is not true.. There are no alternatives, apart from displaying the old scrollbar when this new browser is (somehow) detected?

  214. I have a list view which initially shows 20 items on scrolling down to bottom of the list i need to fetch the next set of 20 items and display them via AJAX. How this can be achieved using iscroll ?

    1. You can override onScrollMove method in the constructor and add the following code:

      if (this.y <= (this.maxScrollY – 5)) {
      $(document).trigger('endoflist');
      }

      You can bind this event to a method which it do de AJAX call.

  215. I have a WebApp using JQtouch. Like other framework for making WebApp, each diferent view is really a DIV that becames visible = true while the other DIV views became visible = false.
    My WebApp use many views. Some of this views are lists using Iscroll 4.
    Currently I use only a global variable for iscroll object in the HTML page named myScroll.
    Each time a view becomes visible and I must use iscroll I use myScroll.destroy() first and then I crete new iscroll myScroll = new iScroll(obj) for the visible view.
    Actually this is working very well (even if the user rotate the device or the list has changed its items, the next visible view refresh its scroll) but do you think I must create a Iscroll for each view?
    If I had 30 view what method would be the best for the device in terms of performance and resource.

    If I must use a Iscroll object per view, which method do I use for handling scrolls refresh only in the iscroll of the visible view?

    Sorry my bad English.

    Thank you very much in advance and for all this work.

  216. I tried using iScroll 3 or 4 with iuiscroll, they finally worked together after some tweaks, however when scrolling with an amount of floating sqaure 20×20 thumbnail anchors (around 20) along with some other LI’s, the scrolling become choppy and the page is impossible to browse on both iPhone 3&4 (scrolling works fine on PC Safari), tried adding useTranstition but no help, is there a way to improve the performance or just my fault?

  217. Hello,
    I made an horizontal carousel with automatic scroll and with snap to each page. It works fine but I notice a bug : when I move the mouse vertically in over and out of the scroll zone, the scroll accelerate and, on firefox (not safari/chrome), stop without snapping to the page.
    I first though it was because of my code but I finally noticed the bug is already in the iscroll carousel demo (you must move the mouse very quickly after clicking on the prev or next button).

    have someone a solution to this bad snapping bug on firefox ? (acceleration is not a problem)

  218. At first I couldn’t click any input fields when surfing my iScroll page in iPhone/Safari, and then I noticed this code:

    myScroll = new iScroll('iscroll_wrapper', {
    useTransform: false,
    onBeforeScrollStart: function (e) {
    var target = e.target;
    while (target.nodeType != 1) target = target.parentNode;

    if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
    e.preventDefault();
    }
    });

    After using it, the scrolling seemed slower/laggy, but the input fields worked. Then I removed the code again, and the input fields still work.

    So I cleaned the cache of Safari, and revisited the page, without the code above. The input fields still works.

    What is going on? Is Safari caching javascript local on a page? Seems very weird…

    1. Ok, my bad. When disabling the input code, I disabled the entire iScroll. So it’s probably nothing.

      But another problem I have is that the tap highlight is not visible inside the iScroll. Is there a reason for this, and can it be fixed?

      I noticed I can use the :active on links, to change the color, but it’s usually hidden under my fat finger. 🙂

      Would be great with a FAQ on iScroll with these kinds of questions. Thanks anyhow for a great script, just gotta make it work 😛

  219. Hi !! is there any way to change the carousel sensitivity ??? I have a full screen carousel but with a small finger slide it changes the div. THanks !!

  220. Hi!
    How can I lock the last item menu so that it can no longer scroll the menu to the left and the background is not shown

  221. This is a good program, I have a question, if my fingers up and down, I do not want to trigger the action, so that the external scroll bar moves up and down with the fingers, when I slide around when he was operating

  222. I want to release the left slide and right slide for ipad.In other words, I just want to let it detect the mouse slide-up and slide-down.Can you help me?Thank you.

  223. Thanks for sharing this awesome piece of code with the world. While playing around with the code and an iPad. I came across a bug that might already be known but I couldnt find it on either github or here:

    I was making an webapp for iPad with iScroll but the scrollable DIV had CSS display:none;. With a simple javascript toggle I could show/hide the iScroll DIV but the above CSS settings would disable iScroll. I dont have a code sample but it shouldnt be hard to reproduce this bug. If the DIV didnt have the display:none; at pagerendering and was hidden/shown at a later stage (by toggle) it would still work perfectly.

  224. i have project which already had the image scroller with using arrow it has been scrolled but i want add sroll which moves using mouse drag and drop(e.g. image viewer in iphone left-to-right) will you please tell me how cant i add left-to-right/ritght-to-left image scroller can add
    thanks………

    1. HI !..
      I use your iscroll.js in my project but I want to add only image scrolling coding what should I delete from iscroll.js which only may affect on only image scrolling

      Because my own bloc which consist arrow to rotate images in my slider pane its not working.

      please give me reply ……

  225. Hi,

    i am using iscroll 4 and android. i took the example of form field from iscroll 4. i am facing following problem.

    1. i open form-fields example in HTC mobile using HTC sync. this is fine.
    2. when i click the last formfield, keyboard popup hide the form field.

    1. Hi,

      Hi,

      i am using iscroll 4 and android. i took the example of form field from iscroll 4. i am facing following problem.

      1. i open form-fields example in HTC mobile using HTC sync. this is fine.
      2. when i click the last formfield, keyboard popup hide the form field.

      how to solve the problem ?please guide me.

      1. I had the same problem on the iPhone and saw a post that fixed it for me. Assign a class to your field (i.e., ‘reset’) and then put this function..
        $(‘reset’).bind( “blur”, function () {
        $(‘html, body’).animate({scrollTop:0},0);
        });

        In the original post it had:
        $(“.ui-header-fixed” ).css(“top”,”0 !important”);
        but I found the html, body to be better for my project.

  226. I have an interesting one that I hope someone might be able to help with.

    I’d like to use iScroll with jquery.ui draggable() to pull from the list and drop in a basket. Using jquery.ui.touch-punch.js so it works on iDevices.. The issue of course is once you start dragging an element it also moves the list up and down. Not sure where to begin!

  227. I was pulling my hair out for about half a day to get iscroll working in a Phonegap + Jquery Mobile (1.0) configuration. Finally got it working by using the standard implementation of iscroll with the following css applied to the scrollable div:


    .scrollable {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    }

    1. Been struggling with this problem in IE for a hour now, IE 9 did just present empty divs for all content that was scrollable. Your solution fixed it though, seems like IE demanded the right: 0;
      bottom: 0;
      to make it work. TU!

    2. Hi stephen, do you have a sample ?
      I’m trying to get a nice result in the configuration you describe : phonegap, jquery mobile – with fixed header / footer.

      I tried iscroll 3 // iscroll 4 and jquery-iscroll plugin.

      1. Apologies on the delay, for some reason wasn’t getting notified on updates to the thread. (Also not sure if my last comment attempt failed — so another try).

        A simplified page structure used:

        Things for me got buggy if I had any tags outside of the scrollable element.

      2. Epic fail —

        Missing code from last comment:

        div data-role=”page”
        ul class=”scrollable”
        /ul
        /div

        (stripped the around tags due to posting issues)

    3. Thank you so much Stephen! They should append this as an update to the actual article.

    4. Stephen, I was trying to use the same config with JQM 1.1 and iScoll4. For some reason my list does not scroll. Am i placing the data-role in the correct div tag?

      div id=”header”
      /div
      div id=”wrapper”
      div id=”scroller” data-role=”page”
      ul id=”thelist” class=”scrollable”
  228. Does iscroll support more than one scroller on a page? I was told it is not working with more than one scroll region on a page, but I am not sure if the js and css are right.

  229. I’m very much impressed on your iscroll4 which saved my day from so many horrible mobile API.

    I’m facing an issue. How to block scrolling on “onclick” event?
    on clicking an anchor tag, the page is scrolling down….

    your help will be appreciated…thanks in advance

  230. If you just want 1-finger scrolling working on all iOS 5.0+ devices, add these css properties to your div in which you want to scroll:
    position: absolute;
    overflow-y: scroll; /* feel free to change */
    overflow-x: hidden; /* feel free to change */
    -webkit-overflow-scrolling: touch;

    Don’t forget to set a width and height for the div.

    1. Problem solver, you need to set the CSS of the scollable div or else it will give the illusion it is not working at all.

  231. I was suggested this web site via my cousin. I’m no longer positive whether or not this post is written by way of him as no one else understand such targeted about my trouble. You’re wonderful! Thanks!

  232. I feel this is one of the so much significant info for me. And i am happy reading your article. But wanna observation on few common issues, The web site taste is great, the articles is truly great : D. Good process, cheers

    1. Try this courtesy of Björn Söderqvist:

      function allowFormsInIscroll(){
      [].slice.call(document.querySelectorAll(‘input, select, button’)).forEach(function(el){
      el.addEventListener((‘ontouchstart’ in window)?’touchstart’:’mousedown’, function(e){
      console.log(‘Preventing event from bubbling up to iScroll, as it would then remove it.’);
      e.stopPropagation();
      })
      })
      }

  233. I am using iScroll 4 on a website, however, I can’t make it work properly with Google Maps. When I try to scroll the map, the page is scrolled as well (also vice-versa), and I can’t seem to find a solution…

    Did this ever happen with anyone else?

    1. Try this courtesy of Björn Söderqvist:


      function allowFormsInIscroll(){
      [].slice.call(document.querySelectorAll('input, select, button')).forEach(function(el){
      el.addEventListener(('ontouchstart' in window)?'touchstart':'mousedown', function(e){
      console.log('Preventing event from bubbling up to iScroll, as it would then remove it.');
      e.stopPropagation();
      })
      })
      }

  234. Holla!
    I got a iscroll carousel workin in the head of my new site build and I love it!
    It needs a little fine tuning but I will send in a donation someday soon and ask for some pointers! Thanks Matteo!

  235. I just implementet iscroll on my phonegap app for android.
    The scrolling jsut works fine.
    but: my header dissapears somethimes and reappears when you scroll 1/3 down…
    my app got a fixed header, a maincontainer and a fixed footer.
    the maincontainer is the only thing that has to scroll.
    something special about my app is taht you stay on the index site only the maincontainer gets changed. (funktion navigateTo)
    here is my navigateTo function so that you better know what I mean:

    function navigateTo(page, transition)
    {
    $('#lock_layer').show();
    $('.maincontainer').addClass('oldpage');
    $('.oldpage').removeClass('maincontainer');
    $('.oldpage').css('z-index', '10');
    $.ajax({
    url: page,
    dataType: "html",
    context: document.body,
    success: function( data ) {
    $(this).append(data);
    if(transition != 'none')
    {
    animateScreen(transition,'.maincontainer');
    }
    $('.oldpage').css('z-index', '1');
    setTimeout('removeOldPage()', 6);
    }
    });
    }

    could somewone pls help me?
    best wishes from swizzerland
    Luca

  236. I found your iscroll perfect for what i’m building but I have 1 part I’m struggling with it may be a very newbie question, on iphone the iscroll seems to disable the whole html page scrolling (vertical). I have iscroll on 1 horizontal element halfway down the page.
    Any pointers?
    Thanks

  237. Doesn’t work in an iframe or an object.
    Any workaround so one can embed a wordpress blog?
    (Sorry for previous post)

  238. Hi, iScroll is great but i would like the move more fluid like iPhone app, the Safari scroll is less smooth than app scrolling, App scroll are faster and stop less fast when you stop srolling, i hope i’m clear

  239. I found a bug, but I’m not sure if it’s with iScroll or with all web apps added to the iPad home screen. Here’s the problem:

    I’ve built a page with iScroll and added it to my iPad home screen (via Safari’s “Add To Home Screen”). When viewing the web app by launching it from the home screen, if I do a four finger swipe to switch to another app, then do another four finger swipe to come back to the web app, the entire web app is frozen, and I have to relaunch it.

    If I am viewing that same web page in mobile safari and do the four finger swipe out, four finger swipe back, the page continues working without any issues.

    Have you ever experienced this?

    1. have the same problem as justin. happens with anything. i created an extremely basic webpage to test with, added:

      and added it to homescreen… it froze after 4 finger swipe

  240. How do we make mousewheel scroll faster? It scrolls like 1% of content each time and we’d like it to scroll 10% (or just a lot more).

  241. I used the structure you recommend – main DIV with id=”wrapper” + child DIV with contains text (that has height=1500px) but it only scrolls to 1000px.

    Why is that? Top container has height 520px and inner one has no height specified (but even when I make it 1500px using jQuery the text gets cut somewhere). Settimeout won’t work (although it RARELY works fine).

  242. After I refreshing the scroll bar on an itouch device’s safari browser, it just scrolled to the top. How can I prevent it from scrolling back to the top?

  243. var myScroll;
    $(document).ready(function()
    {
    $(“#mainList_page”).bind(“pagebeforeshow”, function(event, ui)
    {
    setTimeout(function ()
    {
    myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion)
    }, 1000); // <– Simulate network congestion, remove setTimeout from production!

    alert("aaa");
    })
    })

    function loaded() {
    myScroll = new iScroll('wrapper',{vScrollbar:false});

    setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
    }
    //window.addEventListener('load', loaded, false);

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

    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

    Hello

    Please help.

    “myScroll.refresh ();”
    Is not.

    As a test “alert (” aaa “);” is displayed.

    If you modify where “myScroll.refresh ();” normal operation do?

    Please help me.

    Thank you.

    1. var myScroll;
      $(document).ready(function()
      {
      $(“#mainList_page”).bind(“pagebeforeshow”, function(event, ui)
      {
      setTimeout(function ()
      {
      myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion)
      }, 1000); // <– Simulate network congestion, remove setTimeout from production!

      alert("aaa");
      })
      })

      function loaded() {
      myScroll = new iScroll('wrapper',{vScrollbar:false});

      setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
      }
      //window.addEventListener('load', loaded, false);

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

      document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

      Hello

      Please help.

      “myScroll.refresh ();”
      Is not.

      As a test “alert (” aaa “);” is displayed.

      If you modify where “myScroll.refresh ();” normal operation do?

      Please help me.

      Thank you.

  244. var myScroll;
    $(document).ready(function()
    {
    $(“#mainList_page”).bind(“pagebeforeshow”, function(event, ui)
    {
    setTimeout(function ()
    {
    myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion)
    }, 1000); // <– Simulate network congestion, remove setTimeout from production!

    alert("aaa");
    })
    })

    function loaded() {
    myScroll = new iScroll('wrapper',{vScrollbar:false});

    setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
    }
    //window.addEventListener('load', loaded, false);

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

    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

    Hello
    Please help.
    “myScroll.refresh ();”
    Is not.
    As a test “alert (” aaa “);” is displayed.
    If you modify where “myScroll.refresh ();” normal operation do?
    Please help me.
    Thank you.

  245. Another problem I noticed: I can’t click any input field (I can click its label though to select it). Any ideas on how to fix that?

  246. Anyone here? Please let us know:
    1) How to make mousewheel scroll more content? (like 10% or 100px each time instead of 1%)
    2) How to reverse mousewheel?
    Thanks!

      1. I could not find any discussions with details about modifying the mousewheel scroll in the Google forums. Please provide some insight about how to tweak the speed of the mousewheel via instantiation. Thanks.

  247. Well, I am trying to use this script for a while… Can someone tell me why, even with the simple implementation, my is always scrolling back to top?
    Isn’t it supposed to stay where I want?
    For example: I have a long (bigger than my phone screen) and I want to scroll down. Yeah, it scrolls, but if I release my finger… then it goes back to top :/
    How can I make it stay there?

  248. hello.
    I’m trying to use iscroll with jquerymobile…. and I have a problem that I don’t manage to understand:

    If I put the iscroll “frames” in first page on my jquerymobile site, it works fine. But if I put it in an other page (the second page in my case), it doens’t work (I start in 1st page then go to this 2nd page). It works again if I load/start directly in the 2nd page or, curiously, if I change the device orientation.

    has anyone an idea ?

    1. I found a solution (perhaps not the best) : disable then enable the scroll when changing page.

  249. Hi,
    I’ve used iScroll is some places and must say it’s quite satisfying.
    Pardon me for somewhat unique request, but I’ve seen the touch events is very well implemented by iScroll (both on desktops and mobiles). I tried the touch events and it’s not even working on touch devices.
    Can you please share your ideas/code or suggest how to proceed here?

  250. Combination HTC Desire Z + Android 2.3.x + Firefox 10.1 does not seem to work in a satisfactory manner. One needs to sweep several times to get the scroll working. No problems with webkit or Mobile Opera.

    1. I checked it on Firefox browser on various phones, viz. Samsung Galaxy S2, Samsung Galaxy Tab 7, Cherry Mobile Magnum HD and yes, it behaving weird. Did you find any workaround/fix?

  251. Does anyone know a workaround to get the scrollbar to slide up and down to indicate the page position on IE?

  252. Can i have 2 iScrolls on top of each other with different speeds (i know how to change speed) – and 2 different z-index values that will be set in the DIV?

  253. I am using iscroll-lite for Android and iPhone apps. It does not seem to recognize n for new line.

    txtMultiLine = “line1 n” + “line 2”;
    Is displayed:
    line1 line2

    What am I doing wrong?

  254. Hello,
    I have been using your wonderful iscroll. I have a small query about your plugin. I’m using carousel and the limit seems to be just 7 elements/slides. What needs to be done if I need to display more slides? Please guide me.

    Thank you.

    1. Search this page for “MASTERING THE REFRESH() METHOD”. The problem is that the drop-down changes the size of the scrollable area. You have to tell iscroll to recalculate.

  255. will you consider creating a Jquery mobile plugin with your code? Or even better working on the JQM code to help improve it.

  256. Thanks for such a awesome work !
    I have a small query,I have used this to create a carousel with 4 images visible at a time.I need to make this carousel circular ,when I reach end of scroll I need to bring the first 4 images. any thoughts ?

  257. Hi, On iPhone, i use a script to hide the Adressbar, the adressbar hide only after everyting is loaded, iScroll don’t seem to know that and the scroll bottom is at 60px to high, because the adressbar is 60px tall.

    if i do orientation change it fix itself, i tryed many refresh methode with timeout but nothing work, it look like that when every thing is loaded the adressbar hide but no timeout action seem to take effect.

    Any idea?

  258. I love this script and have used it many times successfully however i am trying to use pull to refresh for multiple scrolling lists on one page so i need a way to pass the list DOM ID into the pullUpAction() and pullDownAction() functions. I haven’t work out a good way to do this yet so if anyone has any ideas please let me know.

  259. Firstly, thanks alot for this.. it is awesome… My question… I have implemented this using the snap to element… Some of the elements that it snaps to also have touch events… the problem is that when you try and interact with these elements the scrolling action also occurs… basically is there the equivalent of preventDefault(); but for the iscroll?… thanks again J

      1. Bruno, this code goes to params definition.

        Ex.
        myScroll = new iScroll(“popupBody”, {
        onBeforeScrollStart: function (e) {
        e.stopPropagation();
        }
        });

  260. We found a problem where we couldn’t set focus to input fields in iOS 5, and this SO answer had the solution: http://stackoverflow.com/a/5769405/35364

    I just changed the selector to $(“input,textarea”)

    $(“input,textarea”).on(‘touchstart’, function(e) {
    e.stopPropagation();
    });

  261. Really nice work! but i’m facing a problem.

    I’ve an bg image, that has 2050px height, ok, using iscroll to function on ipad, no problem.

    But, almost on the botton of the image, i need to include an animation, some bubbles moving aroud…. But, there is my problem, when i put margin-top or top:2000px, it just wont appear… because the iscroll area finishes on the 1024px…. what can i do, to this animation stay on the botton of the page, and only shows when i scroll down the img?

    Thanks!

    1. I believe iScroll doesn’t detect the height of the element correctly if you have elements that are absolutely positioned. Try to use relative positioning and it should work.

      1. Hello. We had exactly the same problem as Eduardo (among other problems) and changing to relative positioning fixed the issue. The othe problems were fixed by reading the comments below so i would like to thank you for your great help

  262. Hello,
    Do you have a sample to use iscrol with jquerymobile
    the problem is ok when I have one page but is nt run when I have 2 pages why ?
    thank’s

    1. jQuery Mobile caches a lot of files and any parts of the page that don’t change. It’s possible that iScroll is not instantiating on the new page – calling the refresh() method might resolve this reset your iScroller

    2. I’m using iscroll with jqm and dont have any issues. make sure you remember put the active class in front of it when you activate it though.

      ex: new iScroll($(“.ui-page-active #mainImage”).get(-1)

      1. Hi, but how could you deal with different duplicate ids across different pages?

        like wrapper, scroller etc.

        Since jqm load these pages into 1 DOM if you do’t use rel=external

  263. I keep getting an error with the iscroll –
    Uncaught TypeError: Cannot read property ‘style’ of null

    Is it possible to implement the ONDOMCONTENTLOADED solution in Backbone framework?

  264. Avoid using “-webkit-box-shadow” CSS property in the scrolling area. It slows down the scrolling tremendously.

  265. Hi, I use iscroll lite, and it seems like mousewheel (or Mac two-finger scroll gestures) events aren’t scrolling the iscroll frame. Is there a way to fix this, or is this something I’ll just get for free with the full version of iscroll?

      1. Awesome! Pretty good so far, but I’m getting some wacky results as the scrolling container reaches the end of scrollable content, and it seems to be because of how many scroll events are automatically generated by Mac’s penchant for mousewheel momentum. Basically, if I scroll downward and reach the end, it just suddenly stops and I lose a lot of the nice momentum I get when you click and drag quickly (flick). If I scroll upward, there’s no strong cutoff but there’s a lot of jittery behavior as it reaches the top, but my Mac’s still sending it scroll events from its own internal scroll momentum. Any ideas? Thanks for a wonderful lib!

  266. nice Work!

    I like it very much! I used it in several iPad web-Projects without any problems or performance issues.

    Thank you!

  267. Hi, brilliant project, I was also entranced by the spinning cube on your logo, how’s that done then? 🙂

  268. Hey there,

    Is it possible for the and to be classes (ie. ?

    I’ve tried this with no success, and I thought I’d pop on here to see what you folks with the bigger brains had to say! =)

    1. So that last comment didn’t work out so well – should have known. What I was trying to ask was… can the ‘div id=”scroller”‘ and ‘div id=”wrapper”‘ be classes instead of id’s?

  269. Is it possible to combine the carousel with the simple scroller?

    What I mean is, swiping left or right would move you through the items in the carousel, but swiping up and down would allow you to scroll the content if it happens to be taller than the viewport? I have a page turner iPad app in which the carousel functionality will take you through the pages of content, but the odd page may have more content than is visible, so the up/down swiping action would be necessary to scroll the content out of view.

  270. When you have only a few list items inside the iscroll (so that the list doesnt fill your entire screen)
    and then scroll down, the scrollup will execute automatically after scrolldown has finished.
    When you scroll up, ony the scroll up is being executed which is correct.

    As soon as the list fills the entire screen
    scrollup won’t be executed automatically
    which is correct.

    How can i stop the scrollup being executed automatically when i scroll down and the list doesnt fill the entire screen?

    YOU CAN SEE THIS IN THE DEMO WHEN REMOVE ALL LI ITEMS EXCEPT 2 OR SO…

  271. Thanks for your source,i want to know when i use the SNAP AND SNAP TO ELEMENT,can i set it auto slide,and which option should i set,sorry for my poor english,i’m from china

      1. If you try and browse the demo in the Windows Phone Emulator, you get the message:

        Hello… if you are looking for our demo, but you’re already using Windows Phone.

        Which is annoying, because I want to see how well Windows Phone handles iScroll4!

  272. Hi guys,
    I’ve a little question about using iScroll multiple times on the same page.

    I’ve tried with this code:

    var scroll1, scroll2;
    function loaded() {
    scroll1 = new iScroll(‘wrapper’);
    scroll2 = new iScroll(‘wrapper_2’);
    }

    But it doesn’t work. Anyone have a solution for this?

    1. These two methods worked for me:

      Solution 1. Include inline code below the HTML…

      var myScroll; myScroll = new iScroll( 'wrapper1' );
      var myScroll2; myScroll2 = new iScroll( 'wrapper2' );

      Solution 2. Use jQuery to do it for you (each wrapper still must have a unique ID)


      var carousels = {};
      $(document).ready(function(index){
      $('.wrapper').each(function() {
      carousels[index] = new iScroll( $(this).attr('id') );
      });
      });

      1. Hi Tom, i’m a bit of a jquery noob, any idea how i code this as jquery?

        var myScroll; myScroll = new iScroll( ‘wrapper1’ );
        var myScroll2; myScroll2 = new iScroll( ‘wrapper2’ );

  273. Hi, Its great one

    I am using this library,In scrolling part there are other elements like input box,button but that are disabled, anyone have solution to enable

    1. check example code (downloaded) under “form-fields” folder . it have resolution to this.

  274. its great script! I have one issue, my content have some images, that images width/height is managed from css, mean I need to resize image based on screen resolution.

    .landing-page-icon-grid div img{
    max-width: 110px;
    width:100%;
    }

    but now scrolling is not working with actual height. its scrolling just half of the content. what could be the resolution to use responsive design for iscroll

    Could you please help me on this?

    Thanks
    Peter

    1. Try this…
      How to start:

      $(‘#mScroll > div’ ).autoSlider({
      timerGap : 4000,
      numberOfSlidingItems : 4,
      slidingItemsWidth : 100,
      scrollDuration : 2000
      }).start();

      Hot to stop:

      $(‘#mScroll > div’ ).autoSlider().stop();

      //function
      var scrollToItem = 1;
      jQuery.fn.autoSlider = function(){
      var elem = $(this);
      var args = arguments[0] || {};
      var interval = args.timerGap;
      var _slidingItemsWidth = args.slidingItemsWidth;
      var _numberOfSlidingItems = args.numberOfSlidingItems;
      var _scrollDuration = scrollDuration;

      var start = function(){
      setInterval(function(){
      if(scrollToItem != -1 ) {
      if(scrollToItem == _numberOfSlidingItems) {
      scrollToItem = 1;
      myScroll.scrollTo(-(_slidingItemsWidth * _numberOfSlidingItems),0, 1000, true);
      } else {
      myScroll.scrollTo((_slidingItemsWidth), 0, _scrollDuration, true);
      scrollToItem ++;
      }
      }
      },interval);
      };

      var stop = function() {
      scrollToItem = -1;
      };
      return {
      start: start,
      stop: stop
      }
      };

  275. Hi, thanks for such a nice work.
    I want to listen some events or add some callback to it, for doing some job like removing invisible tags. But I didn’t find any documents on this. Would you please give me some suggestion?

  276. After using scrollIntoView() for a link button which is inside the wrapper, I am unable scroll to the top, but scrolling at the bottom works? I tried to use refresh after setting scrollIntoView()

  277. what is the topOffset supposed to be?

    If the ‘scroller’ is and start at a height then grows to a max height and then changed to its overflow:auto; height:300px; does it need to reset something, the minScrollY?

    seems
    in _move()

    the newY >= that.minScrollY || that.maxScrollY >= 0 ? that.minScrollY : that.maxScrollY;

    will always have newY == 0, because of that.minScrollY==0 || that.maxScrollY ==1

    so no scroll is happening.
    Anything I might missed?
    Thanks in advance.

  278. do you think there is a way where you can use iScroll to create a Coverflow style carousel, wher eyou can see a little portion of the next and previous slide?

    I’m trying to hack you code adding a left offset, but having hard time to understand which direction to follow

    thanks

  279. I want to be able to either add/reduce the number of li’s, which I can do in the HTML but can’t seem to see the JS which is responsible for this action. It causes me to either see too many blank li’s or not enough to keep on scrolling through.
    I am using the snap to element iScroll.
    Thanks

  280. Is there a way to determine if a particular image is visible in the scrolling div? Is it something you can check with the ‘onScollEnd’ event?

  281. Hi. I started using iScroll and i love it. the only question i have is how to make an li element clickable. right now i have a touchend on the li’s using the id of the li. the problem is when i start to scroll it registers that touchend and automatically fires the function i have for the touchend of the li. i want to be able to scroll and stop the scrolling without firing the touchend. this works with sencha but i hate sencha. was wondering if this is possible with iscroll.

  282. We stumbled over here coming from a different website and thought
    I might as well check things out. I like what I see so i am just following you.
    Look forward to exploring your web page repeatedly.

  283. Hi, I have noticed I cant scroll the page up/down by dragging an iScroll enabled area. Any sugestions?

    Thanks.

  284. Hi

    I am planning to create a mobile website, which is supposed to scroll from one page to another.

    How do i do this….

    Can there be different HTML Pages ?

  285. Hi there. I am successfully using iScroll4 on a mobile website but there is a specific issue I can’t find a solution for.

    Imagine your demo with simple LIs. Image each LI contains an anchor A ta and there is a css rule like a:active {background:blue} for example. Now, when I touch one of the anchors inside the scroller and start scrolling, the a:active rule is triggered and the corresponding anchor stays blue for all the duration of the scroll, which is not the desired effect.

  286. Plugin even works with wrapper set to overflow hidden;position:relative

    plugin works very well on iphone etc. BUT::: with an android i stumble across a lot of Problems, cant scroll far enough wrong calculated scrollbar etx.. i tested all examples. just 1 with minor features is working , but isnt scrolling smooth upwards.

    Tough a very nice Plugin !

  287. Hi,

    Thanks for the script.

    I plan to use it because on iOS 4.x I have an issue. Using your demo example form-fields, if I have input fields (for example for filling out a registration form) and I scroll up or down from a text field, header or footer moves!!!! That only happens with iOS 4.x.

    Any help?

    I need compatibility with iOS 4.x

    Thanks!

  288. Is it possible to destroy the scroller if the div content scroller is less than the div wrapper? I have a problem, I can’t stop the scroll after I go to the next page with less content in div scroller in a same master page. On the other hand, if after I press refresh button, I can’t scroll the next page with more content inside the div scroller. How to handle this? Thanks for helping!

  289. Hi there

    Awesome project! I just started using iScroll4 and it seems to be working really smoothly.

    I am however having a problem preventing the click event bound to my rows. My rows are set to expand to show more information when clicked and contract if clicked again. How do I prevent this click event from firing when the user is actually scrolling the grid rows?

    Thanks so much, Devin

  290. Can i get any example on how we can implement barrel(continues carousels) swipe for menu bar items in scroll.

  291. is this all redundant now that we have

    .elementIWantToScroll{ -webkit-overflow-scrolling: touch;}

  292. One of the projects I’m working on would have made it a little easier if I could do a “scrollTo” based on an ID name rather than an element like ‘li:nth-child(10)’… so I hacked one up real quick:

        scrollToId: function (el, time) { // ADDED 6/3/2012 DRSJR
            var that = this, pos;
            el = document.getElementById(el);
            if (!el) return;
    
            pos = that._offset(el);
            pos.left += that.wrapperOffsetLeft;
            pos.top += that.wrapperOffsetTop;
    
            pos.left = pos.left > 0 ? 0 : pos.left  that.minScrollY ? that.minScrollY : pos.top < that.maxScrollY ? that.maxScrollY : pos.top;
            time = time === undefined ? m.max(m.abs(pos.left)*2, m.abs(pos.top)*2) : time;
    
            that.scrollTo(pos.left, pos.top, time);
    
        },
    

    Place it between the scrollToElement and scrollToPage functions, and call it with scrollToId(‘[div or element id]’,'[time to scroll in ms]’);

  293. The control feels like a charm! Thank you.

    Although for some reason, on my vertical scroll I am able to scroll past the bottom edge, without being snapped back to the last element, to keep an entire list in view. After I resize the browser page, everything snaps to where it should be and just works. Anyone encountered the same problem?

  294. Hi! and thanks for your work. I’m using your script in a jqm/phonegap app for android. I’m trying to create an horizontal timeline with a parallax effect ( two png’s backgrounds one in front of the other). Any suggestion on how do to this? how can i move the lower level background while i scroll? thanks!

  295. Hi, so far iScroll done a great job. But i still faced some minor problems while designing a website for iPad devices.
    – overflow div cannot be scrolled (but i found a solution by using stopPropagation)
    – animate() using jQuery. It won’t work unless i comment out iScroll. Any one got any solutions for it?

  296. Hi, ¿Is there some way to dinamically calculate the width of the #scroller?

    I found that it can be a problem to integrate this carousell with dinamic-contents as it must have a fixed #scroller width.

    Another problem is the use of #id for the #scroller element. ¿There’s some way of specifying which element is the #scroller?

    Thank you.

  297. Hi, If you need to make the scroller look more dinamic (Not #scroller width and #scroller li width mandatory) Just do this in the loaded() function


    var numberElements= $('#scroller').find('ul').find('li').length ;
    var widthScroller = numberElements* 100;
    $('#scroller').width(widthScroller + '%');
    var widthElement = 100 / numberElements;
    $('#scroller').find('ul').find('li').width(widthElement + '%' );

  298. Excellent! Just what I was looking for.

    However, is there a way for the scrollbar to hide when not active on desktop browsers as well? Auto-hiding scrollbars only seem to work on mobile devices.

  299. It seems that the demo here forgot something important: the css style of wrapper element…I learned it from the examples in the package providing for downloading..

  300. Is there a way to make the list items 100% height? I was able to do it by switching the doctype to , but that seems to prevent the scroller from working on an iphone.

  301. Sorry, I forgot to put cod tags in the above message.

    Is there a way to make the list items 100% height? I was able to do it by switching the doctype to
    but that seems to prevent the scroller from working on an iphone.

  302. – consider a feature to select the start point of the scroll layer in a 3×3 grid; with snap-to; very little change and this will help with using the script for navigation UI

    – consider a feature to cache a series of image replacements for the scroll layer; which can be swiped or tapped on boundries to progress

    this would significantly improve the functionality of an already perfect script

    your thoughts?

  303. This is awesome….. As an Android developer, it will be very helpful to me for developing android app. Thanks alot and keep posting new things.

  304. Hi,

    Firstly its great plugin, I love it, and thank you for sharing this…..

    If I have missed this I am sorry, but when the scroll is used on desktop and you drag the scroll bar the scroll direction is reverse of what you would expect from native browser scroll.

    Is this something that can be modified in the script? I am building a cross platform web app and would like to use iScroll across all platforms because it is the best.

    Any feedback or things I could try would be great.

    Thanks

    D

  305. there is some users fixes for some of forms elements not working after appling the iscroll to html.
    i hope these can help you to work out html elemnts fi