> 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: James Scott
    • Posted on: 2011/05/25
    • At: 13:58

    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

    Reply
    • Author: metrix
    • Posted on: 2011/05/26
    • At: 22:01

    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.

    Reply
      • Author: Peppel
      • Posted on: 2011/06/28
      • At: 14:59

      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.

      Reply
      • Author: Peppel
      • Posted on: 2011/07/01
      • At: 11:06

      Hi again, i just found “jquery iphone swipe gesture” on the jquery plugins page. (http://plugins.jquery.com/project/swipe) i will try this out for now.

      Reply
    • Author: Chris C
    • Posted on: 2011/05/28
    • At: 05:14

    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.

    Reply
    • Author: Kym
    • Posted on: 2011/05/30
    • At: 08:38

    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

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

    Reply
    • Author: Chris C
    • Posted on: 2011/05/30
    • At: 15:42

    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.

    Reply
    • Author: rmy
    • Posted on: 2011/05/31
    • At: 12:06

    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 ?

    Reply
    • Hard to say without looking at the code…

      Reply
      • Author: Ron Coke
      • Posted on: 2011/06/01
      • At: 11:56

      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.

      Reply
      • Author: Marc Hall
      • Posted on: 2011/06/01
      • At: 15:18

      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!

      Reply
    • Author: Marco
    • Posted on: 2011/05/31
    • At: 17:13

    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.

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

      Reply
    • Author: skris
    • Posted on: 2011/05/31
    • At: 20:19

    Is this available for JQueryMobile yet??

    Reply
    • Author: Pat
    • Posted on: 2011/06/01
    • At: 16:58

    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!

    Reply
    • no, unfortunately you cannot set the fixed elements (at least not on the iphone/ipad)

      Reply
    • Author: Josh
    • Posted on: 2011/06/03
    • At: 12:35

    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.

    Reply
      • Author: Josh
      • Posted on: 2011/06/03
      • At: 14:39

      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

      Reply
      • Author: Chris C
      • Posted on: 2011/06/04
      • At: 01:28

      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

      Reply
    • Author: snap
    • Posted on: 2011/06/03
    • At: 16:02

    While trying to scroll a list of links within links.
    What should I do to prevent it.

    Reply
    • Author: Rodrigo
    • Posted on: 2011/06/03
    • At: 16:41

    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

    Reply
    • Author: Mike
    • Posted on: 2011/06/04
    • At: 19:52

    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.

    Reply
    • Author: snap
    • Posted on: 2011/06/05
    • At: 21:21

    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?

    Reply
    • try to remove the setimeout in the toucheend event.

      Reply
      • Author: snap
      • Posted on: 2011/06/06
      • At: 13:03

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

      });

      Reply
    • Author: Andy Fuchs
    • Posted on: 2011/06/05
    • At: 22:59

    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

    Reply
      • Author: Andy
      • Posted on: 2011/06/05
      • At: 23:01

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

      a.

      Reply
      • maybe you just need to stop propagation on carousel touchstart/move?

      • Author: Andy
      • Posted on: 2011/06/06
      • At: 13:21

      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

      Reply
      • Author: Andy
      • Posted on: 2011/06/06
      • At: 16:17

      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.

      Reply
    • you’ll be able to do it in v4.1 (soon to be released, today or tomorrow)

      Reply
    • Author: Alego
    • Posted on: 2011/06/06
    • At: 15:30

    Hai

    Does Anyone know, iscroll conflict solve with jplayer?

    i need support for that conflict

    Thanks

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

    Reply
    • Author: aditya kumar singh
    • Posted on: 2011/06/08
    • At: 17:17

    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

    Reply
    • Author: Bo Anderson
    • Posted on: 2011/06/08
    • At: 23:04

    Can iScroll be used with iFrames, and if so, how?

    Reply
  • Why can not [select] button. Did the error with the FORM
    Fixed?

    Thanks for your help

    Reply
    • Author: Matthew
    • Posted on: 2011/06/09
    • At: 22:17

    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.

    Reply
    • Author: wasim
    • Posted on: 2011/06/16
    • At: 13:15

    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

    Reply
    • Author: Jake
    • Posted on: 2011/06/17
    • At: 22:45

    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

    Reply
    • Author: jerry
    • Posted on: 2011/06/17
    • At: 23:42

    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

    Reply
    • Author: Neeraj
    • Posted on: 2011/06/18
    • At: 23:25

    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

    Reply
    • Author: Sam
    • Posted on: 2011/06/20
    • At: 17:50

    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?

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

    Reply
    • Author: Carl
    • Posted on: 2011/06/22
    • At: 20:23

    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?

    Reply
    • Author: Matthew
    • Posted on: 2011/06/22
    • At: 22:34

    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.

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

      Reply
    • Author: cyril
    • Posted on: 2011/06/23
    • At: 15:43

    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!

    Reply
    • hard to say without looking at the code. post it on the discussion group

      Reply
    • Author: Bo Anderson
    • Posted on: 2011/06/27
    • At: 09:23

    Can iScroll be used in an iFrame and if so, how?

    Reply
    • Author: Hakan
    • Posted on: 2011/06/28
    • At: 09:33

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

    Reply
    • Author: Bingo
    • Posted on: 2011/06/29
    • At: 04:30

    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?

    Reply
    • give translate3d(0,0,0) to the images.

      Reply
    • Author: Marc
    • Posted on: 2011/06/29
    • At: 15:50

    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?

    Reply
      • Author: Fayez
      • Posted on: 2011/06/29
      • At: 17:53

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

      Reply
      • I know, sorry about that. I’m working on it.

    • Author: Marc
    • Posted on: 2011/07/03
    • At: 01:56

    Any idea, when the Pull to Refresh plugin will be available?

    Reply
    • Author: Elad
    • Posted on: 2011/07/03
    • At: 16:40

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

    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>