> iScroll 4

iscroll4

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

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

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

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

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

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.

/Share the joy

/Reactions

    • Author: sriram
    • Posted on: 2012/01/05
    • At: 17:51

    can we use iscroll for symbian belle and blackberry os

    Reply
    • Author: dev
    • Posted on: 2012/01/09
    • At: 08:32

    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………

    Reply
      • Author: dev
      • Posted on: 2012/01/11
      • At: 07:13

      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 ……

      Reply
    • Author: birgunj
    • Posted on: 2012/01/09
    • At: 14:32

    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.

    Reply
    • Author: Leonardo J.
    • Posted on: 2012/01/09
    • At: 16:16

    Great man! awesome work!!

    Reply
      • Author: birgunj
      • Posted on: 2012/01/10
      • At: 04:33

      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.

      Reply
        • Author: Gaylyn
        • Posted on: 2012/02/06
        • At: 23:26

        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.

    • Author: Nick
    • Posted on: 2012/01/10
    • At: 13:51

    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!

    Reply
    • Author: Stephen
    • Posted on: 2012/01/10
    • At: 18:17

    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;
    }

    Reply
    • Spent seriously all day working on this…you’re solution solved my problem. Thank you so much!

      Reply
      • Author: Marcus
      • Posted on: 2012/01/16
      • At: 11:50

      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!

      Reply
      • Author: Guillaume
      • Posted on: 2012/01/18
      • At: 16:28

      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.

      Reply
        • Author: Mahmoud Abdel-Fattah
        • Posted on: 2012/01/23
        • At: 00:28

        Yes, Would you please share a sample or tutorial ?

        • Author: Stephen
        • Posted on: 2012/01/23
        • At: 18:28

        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.

        • Author: Stephen
        • Posted on: 2012/01/23
        • At: 18:31

        Epic fail —

        Missing code from last comment:

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

        (stripped the around tags due to posting issues)

      • Author: Penn
      • Posted on: 2012/02/14
      • At: 08:29

      thank you very much! I’ve been looking for these for a long time!

      Reply
      • Author: Kevin Yien
      • Posted on: 2012/02/22
      • At: 07:00

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

      Reply
      • Author: Ravi
      • Posted on: 2012/06/10
      • At: 14:05

      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”
      Reply
        • Author: PRX
        • Posted on: 2012/06/12
        • At: 10:51

        Did you find a solution Ravi ?

    • Author: Kyle
    • Posted on: 2012/01/13
    • At: 00:30

    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.

    Reply
    • Author: Vinay
    • Posted on: 2012/01/13
    • At: 14:10

    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

    Reply
    • Author: Praveen Yadav
    • Posted on: 2012/01/14
    • At: 08:34

    Hi! birgunj,
    I am also facing same issue. Any luck???

    Thanks,
    Praveen

    Reply
    • Author: ZeroXX
    • Posted on: 2012/01/14
    • At: 23:58

    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.

    Reply
      • Author: K
      • Posted on: 2012/02/05
      • At: 20:05

      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.

      Reply
  • 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!

    Reply
    • Author: kttv live
    • Posted on: 2012/01/16
    • At: 17:55

    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

    Reply
  • iScroll is seriously a great script. However, on my android, when a click a form, the keyboard continuously pops and and then disappears.

    Reply
      • Author: DaveMaude
      • Posted on: 2012/02/09
      • At: 15:17

      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();
      })
      })
      }

      Reply
    • Author: dec
    • Posted on: 2012/01/17
    • At: 03:27

    Hi! Fantastic plugin! Got my head around it in no time! Cheers!

    Quick question, is it possible to add a drilldown feature similar to… http://filamentgroup.com/examples/menus/ipod.php#

    I would be cool if you could have your scrolling feature with the ability to drill down into a nested

    Thanks in advance!
    Decbrad

    Reply
    • Author: Luis Soares
    • Posted on: 2012/01/20
    • At: 16:48

    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?

    Reply
      • Author: DaveMaude
      • Posted on: 2012/02/09
      • At: 15:18

      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();
      })
      })
      }

      Reply
    • Author: Jay elling
    • Posted on: 2012/01/23
    • At: 22:31

    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!

    Reply
    • Author: luca
    • Posted on: 2012/01/24
    • At: 15:53

    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

    Reply
    • Author: nik
    • Posted on: 2012/01/24
    • At: 16:11

    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

    Reply
    • Author: Steve Jordi
    • Posted on: 2012/01/26
    • At: 15:47

    Doesn’t work is an or an
    Any workaround so one can embedd a wordpress blog?

    Reply
    • Author: Steve Jordi
    • Posted on: 2012/01/26
    • At: 15:48

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

    Reply
    • Author: onigetoc
    • Posted on: 2012/01/26
    • At: 17:08

    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

    Reply
    • Author: Justin
    • Posted on: 2012/01/27
    • At: 12:26

    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?

    Reply
      • Author: dallas
      • Posted on: 2012/02/01
      • At: 21:59

      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

      Reply
        • Author: dallas
        • Posted on: 2012/02/01
        • At: 22:00

        added the meta tag with name=”apple-mobile-web-app-capable” content=”yes”

    • Author: Paul
    • Posted on: 2012/02/02
    • At: 17:03

    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).

    Reply
      • Author: klaus
      • Posted on: 2012/02/08
      • At: 20:59

      have the same problem. some help please :)

      Reply
    • Author: Paul
    • Posted on: 2012/02/02
    • At: 17:06

    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).

    Reply
    • Author: George
    • Posted on: 2012/02/08
    • At: 07:03

    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?

    Reply
    • Author: myunghwan ahn
    • Posted on: 2012/02/08
    • At: 12:52

    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.

    Reply
      • Author: myunghwan ahn
      • Posted on: 2012/02/08
      • At: 12:53

      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.

      Reply
    • Author: myunghwan
    • Posted on: 2012/02/09
    • At: 05:22

    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.

    Reply
    • Author: Paul
    • Posted on: 2012/02/09
    • At: 12:15

    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?

    Reply
    • Author: Paul
    • Posted on: 2012/02/10
    • At: 10:42

    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!

    Reply
    • please use the discussion forum for support requests https://groups.google.com/forum/#!forum/iscroll

      the function which controls the mouse wheel is _wheel. very easy to tweak

      Reply
        • Author: Ben
        • Posted on: 2012/03/08
        • At: 12:59

        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.

    • Author: BuKToP
    • Posted on: 2012/02/12
    • At: 10:50

    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?

    Reply
      • Author: taavi
      • Posted on: 2012/02/17
      • At: 17:07

      i get that same hacky behavior when i initialize iscroll twice.. so make sure you only do it once.

      Reply
    • Author: lyonnel
    • Posted on: 2012/02/14
    • At: 12:38

    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 ?

    Reply
      • Author: lyonnel
      • Posted on: 2012/02/15
      • At: 12:18

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

      Reply
        • Author: onigetoc
        • Posted on: 2012/03/12
        • At: 17:50

        i destroy a remake a new myscroll everytime, until now, it’s the only way it work

    • Author: Bikas
    • Posted on: 2012/02/14
    • At: 14:24

    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?

    Reply
    • Author: afro360
    • Posted on: 2012/02/15
    • At: 02:55

    Im really happy with iScroll, Its added a new level of cooles to my application:) Thanks ALLOT

    Reply
    • Author: MKN
    • Posted on: 2012/02/15
    • At: 09:29

    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.

    Reply
      • Author: Prasad Karanjgaonkar
      • Posted on: 2012/02/22
      • At: 13:15

      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?

      Reply
    • Author: MSK
    • Posted on: 2012/02/21
    • At: 16:21

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

    Reply
    • Author: Francesco Bertelli
    • Posted on: 2012/02/22
    • At: 22:54

    I wonder if now is possible to detect the scroll poisition during touchmove.

    It was interesting how app Clear web version does that

    http://clear.youyuxi.com/ (check it on the iphone)

    Reply
    • Author: Brokop
    • Posted on: 2012/02/24
    • At: 09:36

    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?

    Reply
    • Author: Brokop
    • Posted on: 2012/02/24
    • At: 09:36

    Btw – thank you for a brilliant piece of software :)

    Reply
    • Author: Luqman
    • Posted on: 2012/02/24
    • At: 09:49

    Hi, how can I use carousel in RTL (right to left) mode?
    Thanks.

    Reply
    • Author: Michael
    • Posted on: 2012/02/25
    • At: 09:08

    Hi Matteo,

    thank you for your awesome script.

    I’m using it on http://dailyfratze.de, a site dedicated to a daily photo project.

    It’s used to create an horizontal image quilt on the profiles, have a look here:

    https://dailyfratze.de/michael

    drag it to the right to load more images.

    Again, thank you!
    Michael.

    Reply
    • Author: onigetoc
    • Posted on: 2012/02/27
    • At: 07:11

    Hi, i made a tabbar to work with iScroll, jQtouch, what do you think?
    iTabbar
    Online Demo

    Reply
    • Author: Howard
    • Posted on: 2012/02/29
    • At: 19:07

    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?

    Reply
    • Author: SripadRaj
    • Posted on: 2012/03/01
    • At: 09:33

    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.

    Reply
    • Author: onigetoc
    • Posted on: 2012/03/03
    • At: 17:22
  • Oh and how do you get this to work with an accordion list?

    When the drop down is activated, I can’t scroll down to view the content.

    Reply
      • Author: Chris Stahl
      • Posted on: 2012/03/05
      • At: 16:53

      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.

      Reply
    • Author: Esteban Saa
    • Posted on: 2012/03/05
    • At: 23:31

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

    Reply
    • Author: Nikhil
    • Posted on: 2012/03/06
    • At: 10:46

    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 ?

    Reply
    • Author: Rachel
    • Posted on: 2012/03/06
    • At: 12:51

    Love this! thank you – saved one of our projects! :)

    Reply
    • Author: onigetoc
    • Posted on: 2012/03/12
    • At: 17:00

    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?

    Reply
    • Author: Eamonn
    • Posted on: 2012/03/13
    • At: 01:06

    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.

    Reply

/Leave a reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>