> 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: destiny
    • Posted on: 2012/06/19
    • At: 11:34

    Awesome project!and hope the first issue:Form fields compatibility can be fixed.

    Reply
    • Author: Joel Pablo
    • Posted on: 2012/06/28
    • At: 05:55

    Thanks for the awesome Script!

    Reply
    • Author: O.
    • Posted on: 2012/07/06
    • At: 15:34

    Very helpful, thank you! The form fields compatibility would be great to have! Keep on!

    Reply
    • Author: user
    • Posted on: 2012/07/12
    • At: 10:07

    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.

    Reply
    • Author: rafinskipg
    • Posted on: 2012/07/12
    • At: 10:49

    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 + '%' );

    Reply
    • Author: Jason
    • Posted on: 2012/07/13
    • At: 16:48

    Fantastic script that gives my web app a native feel. Thankyou so much for your work!

    Reply
    • Author: Matt
    • Posted on: 2012/07/14
    • At: 06:00

    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.

    Reply
    • Author: Kinka
    • Posted on: 2012/07/14
    • At: 12:38

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

    Reply
    • Author: Kinka
    • Posted on: 2012/07/14
    • At: 13:08

    And more to say, iScroll conflicts with jQueryMobile…What a pity!

    Reply
    • Author: Mike
    • Posted on: 2012/07/15
    • At: 20:50

    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.

    Reply
    • Author: Mike
    • Posted on: 2012/07/15
    • At: 20:52

    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.

    Reply
    • Author: Alex
    • Posted on: 2012/07/18
    • At: 08:12

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

    Reply
    • Author: Maibam
    • Posted on: 2012/07/18
    • At: 12:43

    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.

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

    Reply
    • Author: Albert
    • Posted on: 2012/07/23
    • At: 17:34

    Hi, first of all, great plugin!!
    It’s possible autoplay?

    Thanks,

    A

    Reply
    • Author: satish
    • Posted on: 2012/07/24
    • At: 14:58

    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 fixes that current cause limited use with fear on some place

    http://stackoverflow.com/questions/5745374/iscroll-4-not-working-with-form-select-element-iphone-safari-and-android-brows

    Reply
    • Author: Vasudha
    • Posted on: 2012/07/25
    • At: 09:30

    I have a JQuery Mobile carousel in my application, I need to populate data in a drop-down as soon as the carousel is flipped, this is done, now the new implementation is that as soon as the user pauses on the carousel for >= 3 seconds then only the drop-down should be updated. So how am I suppose to capture this pause time?

    Reply
    • Author: Vishal
    • Posted on: 2012/07/26
    • At: 23:17

    Is the input issue fixed in 4.2? I can see references inside the JS code for the same and it works too ;)

    Although the dropdown still don’t work but the input/password looks great

    Reply
    • Author: Shankar
    • Posted on: 2012/07/27
    • At: 07:50

    I got some issue in iscroll please provide the solution….. select list is not working in IScroll

    Reply
    • Author: Alyssa
    • Posted on: 2012/07/30
    • At: 22:09

    The iOS Perfect Scroller works great! Only issue is that I can’t get the Safari address bar to automatically disappear. Do you know a workaround for this?

    Reply
    • hideScrollbar:true

      Reply
        • Author: Philip A.
        • Posted on: 2012/08/03
        • At: 23:13

        This doesn’t hide the address bar!

    • Author: Derrick
    • Posted on: 2012/08/02
    • At: 07:40

    hello,everyone,i got puzzled between safari(version:6533.18.5) and safari(version:7534.48.3),i can zoom out the words clearly at the first browser,but not at the second. i import iscroll.js in my web-project. who knows the reason,please teach me ,thank you so much:]

    Reply
      • Author: Derrick
      • Posted on: 2012/08/02
      • At: 10:48

      anyone help me?

      Reply
        • Author: Derrick
        • Posted on: 2012/08/15
        • At: 05:56

        safari5.1.1 not clear,safari 4.3.5 very clear,
        sb who knows please help me ,thank you,5555555555555:[,i am crying………..

        • Author: Derrick
        • Posted on: 2012/08/16
        • At: 03:25

        does iscroll4 support safari5.1.1 completely? i think after zoomed out the words,the words can’t come back to clear ones.
        anyone give me some advices? maybe change some codes in iscroll4?
        please help me……..

    • Author: Rich
    • Posted on: 2012/08/03
    • At: 00:05

    I’m writing a java-script web app and I’m having an issue with the onclick event not firing for any objects in the scroller on for the amazon fire tablet.

    the same seems to happen with the ipad as well but the ipad locks up all onclicks not just the ones in the scroller.

    the objec initialization is as follows.


    var myScroll;
    function loaded()
    {
    myScroll = new iScroll('wrapper-1',{snap: false,momentum: true,hScrollbar: false,vScrollbar: false,});
    myScroll = new iScroll('wrapper-2',{snap: false,momentum: true,hScrollbar: false,vScrollbar: false,});
    myScroll = new iScroll('wrapper-3',{snap: false,momentum: true,hScrollbar: false,vScrollbar: false,});
    myScroll = new iScroll('wrapper-4',{snap: false,momentum: true,hScrollbar: false,vScrollbar: false,});
    }
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);

    it works great on the pc’s and it did work initially on both tablets. the items in the scroller are added via the DOM and then a refresh is called. and as I said it did work. the only changes was I added this line.


    function ResetTimer() { window.setTimeout('RefreshTimer()',15000); TimerOn = true;}

    which shouldn’t break it. but then I commented back out and it still doesn’t work.

    any help would be appreciated.

    Reply
    • Author: Philip A.
    • Posted on: 2012/08/03
    • At: 17:24

    I’d like to use the carousel inside the scrolling, how can I achieve this since the scrolling using “scrolling momentum” while carousel using “snap to”. Can I define multiple scrolling instances in one page?

    Reply
      • Author: PetyrVeliki
      • Posted on: 2012/08/27
      • At: 15:33

      Yes, you can have many ones. But if you’re using iscrolls on different pages – I advise you to use one and the same iscroll that you just refresh when change content or load different page content. It saves resources this way.

      Reply
        • Author: Priyanka Mittal
        • Posted on: 2012/09/07
        • At: 07:01

        Do you have an example of one iscroll being used on multiple pages?

    • Author: shjie047
    • Posted on: 2012/08/07
    • At: 05:01

    i want disable iscroll swipeUp and swipeDown, To avoid messing up native gestures such as scroll,

    anyone help me?

    Reply
    • Author: Shilpa Suvarna
    • Posted on: 2012/08/08
    • At: 16:49

    Can we have a scrollable area with another scrollable area?

    Reply
      • Author: PetyrVeliki
      • Posted on: 2012/08/27
      • At: 15:35

      Yes. In the application I’m doing now – we have a dashboard, which has vertical scroll, and several rows on this dashboard, each one of which has horizontal iscroll.

      Reply
    • Author: Scott
    • Posted on: 2012/08/09
    • At: 19:42

    This is an awesome plugin. Thanks!

    However I have a question. I’m using the carousel ability, but want to see a portion of the in-view item’s neighbours. I’ve done this with padding on the #wrapper, however on the first snap to element, it’s translating to the left equal to my padding size. this makes it so the “in-view” element is always to the left, and isn’t showing anything of it’s left neighbour and too much of it’s right neighbour.

    Anything you can think of?

    Thanks!

    Reply
      • Author: Scott
      • Posted on: 2012/08/09
      • At: 19:45

      Ha! Of course after asking a question I figure something out immediately.

      After initialising the iScroll on my carousel, I just $(“#wrapper”).css(“padding”, “0 50px”);

      Since it’s been initialized already without the padding, it works like a glove.

      Thanks for the plugin!

      Reply
  • hi..thx for iscroll..but I have some problems with it..
    when there is a “iframe” tag in “li”,it seems to not work. eg:

    <iframe id='myscene2'src='scene2.html'

    anybody knows why? thanks a lot.

    Reply
    • Author: harisha
    • Posted on: 2012/08/12
    • At: 09:01

    i need to show/hide some block of content when i scroll to a particular position , thanks in advance

    Reply
    • Author: Chetan
    • Posted on: 2012/08/20
    • At: 09:07

    Hello Guys,

    I needs assistance to make scroller to autpscroll.

    Thanks
    Chetan

    Reply
    • Author: Joe
    • Posted on: 2012/08/21
    • At: 08:27

    LockDirection invalid in 4.2

    Reply
    • Author: Nishant
    • Posted on: 2012/08/26
    • At: 20:09

    Iscroll is great plugin. very helpful to me.. currently I am facing a problem.. i want to show an particular div element selected on pageload. For example.
    I have box div where a list of items shown in iscroll.. when i scroll the list and select any of last items and then submit the form.. after post back.. the selected item goes to the top.

    Kindly help..

    Reply
    • Author: Andrew
    • Posted on: 2012/08/27
    • At: 02:23

    I have to pinch/zoom (then zoom back out) to get it to work properly (horizontal scrolling only, hScroll=true).

    I tried changing the loading-order, but it just doesn’t seem to initialize properly no matter how I put it. Even tried making it scroll to a position on load to fire it, but that didn’t work either. Any help is greatly appreciated!

    Reply
    • Author: Bog
    • Posted on: 2012/08/28
    • At: 13:24

    Wonderful plugin which can be used for both scroll and carousel. How can we make it rotate?

    Thanks,
    Bog

    Reply
    • Author: clement
    • Posted on: 2012/09/07
    • At: 14:01

    this script does not seem to work on IE for windows phones. It just does not scroll !

    Reply
    • Author: sheng.ni
    • Posted on: 2012/09/07
    • At: 14:44

    iscroll4 Too much content
    The effect is intolerable

    Reply
    • Author: Jin Tao
    • Posted on: 2012/09/10
    • At: 17:11

    Bebop-a-lulla everyone.

    Nice scrolling library, very useful.

    I found a glitch, tho it’s apparently how javascript works. If you set iScroll on element that is set as “display: none;” on the css, it won’t work.
    You have to either set the display property of the element to “none” after declaring a new instance of iScroll, or cast refresh() after display block.

    Reply
    • Author: Yuri
    • Posted on: 2012/09/10
    • At: 22:14

    Thanx for the efforts!

    I have one little issue. I’m using jQM as framework, and going ‘forward’ in pages works fine, the content is scrollable. Though i have set ‘snap’ tot true; otherwise is just snaps back.

    But when i go back, using data-direction=”reverse”, for the reverse transition the scrolling doesn’t work anymore.

    Is it incorrect use of the REFRESH() METHOD ?


    $(document).live( 'pageinit',function(event){

    // iScroll
    var myScroll;
    function loaded() {
    myScroll = new iScroll('wrapper');
    myScroll.refresh();
    }
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);

    }); // end

    The above code is in a javascript file, last in the

    Reply
      • Author: Yuri
      • Posted on: 2012/09/10
      • At: 22:16

      …last in the HEADER ( ) i mean ;-)

      Reply
    • Author: Suresh
    • Posted on: 2012/09/11
    • At: 14:43

    Hi,

    Thank u so much for sharing u knowledge.I have prepared app using phonegap . In my app i am collecting data from server and displaying in listview using ajax. My code is,

    where i call the following code,i mean after complete the ajax method or before ,

    var myScroll = new iScroll(‘wrapper’);
    document.addEventListener(‘DOMContentLoaded’, loaded, false);

    thank u i advance

    Reply
    • Author: Yuri
    • Posted on: 2012/09/11
    • At: 21:22

    I’m sorry…
    But could someone just PLEASE post the correct way to implement the refresh() method? (jQM issue)

    - Like where and how?
    - Before custom js?
    - I have attempted almost every ‘solution’, but the scrolling only works on one page or with a manual refresh…

    I’m also using asp.net…

    Reply
    • Author: bboyairwreck
    • Posted on: 2012/09/12
    • At: 13:43

    Is there away to ante up the sensitivity on this? because i implemented iScroll in my phonegap android app and it works great but a user has to drag their finger quite some distance in order to trigger the momentum. Thanks in advance!

    Reply
      • Author: bboyairwreck
      • Posted on: 2012/09/12
      • At: 13:45

      i meant to say “flick it pretty hard/fast” oppose to “dragging quite some distance”.

      Reply
    • Author: Jeet
    • Posted on: 2012/09/12
    • At: 14:54

    This is great tool. I have used iscoll4 and addtohomescreen tool in my mobile web app. I am facing one strange issue. The close button works well in iOS and Android 2.3.5 version but does not work well in Galaxy SII (2.3.6). I have added

    item.addEventListener('touchstart', function (e) { e.stopPropagation(); }, false);
    item.addEventListener('mousedown', function (e) { e.stopPropagation(); }, false);

    in the AddToHome.js file but still it does not work for this Android version. Although this works well for Android 2.3.5 and iPhone iOS.

    Any help will be appreciated.

    Once again thanks for the great tools.

    Jeet

    Reply
    • Author: arash kiani
    • Posted on: 2012/09/12
    • At: 20:38

    Hi

    Is there a way to reverse the elements ?

    e.g.

    a
    b
    c

    to

    c
    b
    a

    Reply
    • Author: betterlee
    • Posted on: 2012/09/13
    • At: 04:56

    IPad ios5.1, use the iscroll.js font magnifier fuzzy

    Reply
      • Author: betterlee
      • Posted on: 2012/09/13
      • At: 05:04

      Font magnifier fuzzy, has troubled me for a long time, please know please answer, thank you very much, you helped me a lot.

      Reply
    • Author: Philip A.
    • Posted on: 2012/09/13
    • At: 19:54

    I’m running out the problem with Android keyboard and the footer layer. The keyboard will push the footer up and eventually hide the text field behind it which user can’t see the text field to enter the data in. Set z-index priority will not hide the footer. Any ideas?

    This issue is not present in iOS.

    Reply
  • We’ve built a smooth, glitch-free implementation of floating / sticky headers for iScroll. Check it out: http://14islands.github.com/iscroll-floating-headers/

    Reply
  • I’m a litle bit confused on where i’ve to put the call to destroy().

    Considering the first and most basic example, where and how do i need to call destroy() in order to do the right thing?

    Thanks in advance.

    Julio.

    Reply
    • you don’t need to call it at all, unless you want to really destroy the iScroll object, in that case it depends on your application…

      Reply
    • Author: Kanitz
    • Posted on: 2012/09/18
    • At: 08:41

    If there is scroll in scroll, how to prevent click two time.

    Reply
    • Author: John
    • Posted on: 2012/09/19
    • At: 00:07

    iScroll is without question a phenomenal piece of work. I know it’s extremely difficult to keep up with all different variations of OS’s, especially Android.

    One thing I can’t seem to get past is Ice Cream Sandwich (ICS) isn’t allowing scrolling. The content keeps bouncing back to the top. It works fine on all other versions of Android, even the latest JellyBean. So I’m stumped. Any thoughts?

    John

    Reply
    • Author: deverv
    • Posted on: 2012/09/19
    • At: 10:57

    Hi, nice plugin. I need to put this kind of table(http://jcbulanadi.oni.cc/sfht_freezecolumn_sortable_blue.html) inside the iscroll, can you help me? I tried putting the wrapper and the scroller inside the table tags but it doesnt work. What I need is have fixed headers, and the ability of sort by rows. So how can get fixed headers and sort by rows?

    Reply
    • Author: deverv
    • Posted on: 2012/09/19
    • At: 18:33

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