> 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: Mercury
    • Posted on: 2013/01/07
    • At: 22:45

    Is it possible to use class names instead using id, how ? thanks

    Reply
      • Author: Mercury
      • Posted on: 2013/01/07
      • At: 23:00

      actually not working when next page loads?

      Reply
    • use a reference to a DOM element instead of the ID

      Reply
        • Author: Frank
        • Posted on: 2013/01/10
        • At: 15:55


        $(document).ready(function() {
        setupScrollbars();
        });

        function setupScrollbars() {
        //Created an array for adding n iScroll objects
        var myScroll = new Array();
        $('.scrollable').each(function(){
        id = $(this).attr('id');
        myScroll.push(new iScroll(id,{ hideScrollbar:false, snap: true, momentum: false, hScrollbar: false, vScrollbar: true }));
        });
        }

    • Author: scavenger
    • Posted on: 2013/01/08
    • At: 12:06

    Mousewheel not detected under Firefox 17 :

    dummyStyle = doc.createElement('div').style, is NOT working for Firefox 17.

    you have to add on line 15 of iscroll.js :
    if (navigator.appCodeName === 'Mozilla') return 'Moz';

    Reply
    • thanks, please use github for bug reporting

      Reply
    • Author: scavenger
    • Posted on: 2013/01/08
    • At: 12:22

    increase mousewheel speed when using a mouse compatible browser (very slow by default) :
    Modify this on line 664 of iscroll.js :

    wheelDeltaX = wheelDeltaY = -e.detail * 30;

    Reply
    • unfortunately this varies depending on the mouse/wheel type. It’s impossible to find a common denominator.

      Reply
    • Author: MoSK
    • Posted on: 2013/01/08
    • At: 23:46

    Hi Matteo, excellent plugin! I wanna have the loadMore content but without any bounce effect, is that possible? if yes can you please give me an example? I followed the pull to refresh example and its working, but what I don’t need is that bounce effect nor ‘pull’ or ‘release’ labels. When the user scroll down to the bottom they simply get more content appended to the div. Your help will be much appreciated. Thanks.

    Reply
    • Author: Reme
    • Posted on: 2013/01/09
    • At: 19:52

    How can I set the height of the actual scrollbar itself. I tried defining it int eh CSS but because of the JS calculations it then does not go all the way to the bottom of the page.

    I am looking to make a short fat scroll bar for a project, width adjustment works no problem but I am looking to get that bar down to about 60/80px instead of the 200+ its calculating it too while still having the scroll bar scroll all the way t the bottom of the page.

    Thanks

    Reply
    • Author: Mike
    • Posted on: 2013/01/11
    • At: 21:36

    Hi – Thanks a lot.
    I’m not sure if this question was asked before:
    I have several Pages and I want to slide between them like with jqtouch – but i want also to use iscroll on it, since the toolbar should not be slided. Is this possible? If yes could you pleas give me an example?

    thanks a lot!

    Reply
    • Author: Farooq Zaman
    • Posted on: 2013/01/16
    • At: 09:03

    iScroll is very slow on Android 4.1.1. I am using WebView in my application to render HTML contents.

    Reply
    • Author: Fábio Garcia
    • Posted on: 2013/01/18
    • At: 15:56

    Is there any easy way to set the scroll to start from bottom instead of the default top?

    start like this:

    item 1
    item 2
    ——–
    | item 3 |
    | item 4 |
    | item 5 |
    ——–

    Thanks!

    Reply
    • Author: Francesco
    • Posted on: 2013/01/23
    • At: 15:47

    Hi there,

    I am currently using this scroller and its awesome! My only problem is that I need the scroller script to reload and add the extra width when clicking on a button with hidden icons. Ex I have buttons a to z, and button E has hidden icons that when clicked, will show the hidden icons next to it. So what needs to be done please? Thanks!

    Reply
    • Author: Teddy
    • Posted on: 2013/02/01
    • At: 14:59

    Hello,
    I have a problem, I would like create a javascript function on a button that change the url, then scroll to one page.

    my code :

    ........................................

    function total() {
    page();
    slide1();
    }

    function page(){
    window.location.href='index.html';
    }

    function slide1(){

    var myScroll;

    function loaded() {
    myScroll = new iScroll('wrapper', {
    snap: true,
    momentum: false,
    hScrollbar: false,
    onScrollEnd: function () {
    document.querySelector('#indicator > li.active').className = '';
    document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
    }
    });
    myScroll.scrollToPage(1);return false
    }
    }

    ........................................

    It don’t work, I don’t know why,
    Help me, thanks

    Reply
      • Author: Gareth
      • Posted on: 2013/02/05
      • At: 09:37

      Your functions are all messed up.

      Once you’ve done the page transition when you want to scroll, add this.

      var myScroll;

      function loaded(){
      myScroll = new iScroll('wrapper', {
      snap: true,
      momentum: false,
      hScrollbar: false,
      onScrollEnd: function(){
      document.querySelector('#indicator > li.active').className = '';
      document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
      }
      });
      myScroll.scrollToPage(1);return false
      }

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

      Reply
    • Author: catch22
    • Posted on: 2013/02/03
    • At: 22:38

    Hi, this is a great resource for iPad HTML dev, however one thing I’ve found is CSS animations break or just don’t work within a scroller… More details here:

    https://groups.google.com/forum/#!topic/iscroll/dIgBd33IQpI

    any help resolving it would be greatly appreciated!

    Reply
    • Author: Rafael
    • Posted on: 2013/02/08
    • At: 20:11

    Hi,

    I have a small issue. When I use “pinch to zoom” with small images there is no problem, but with big images (bigger than the wrapper)I cannot see the border of the image and the horizontal scroll works fine but not enough to see all the jpg.

    I tried changing differents CSS options but nothing seems to work as I want because my web should be seen on different screens size so it is not easy to set up on CSS.

    Thank for all and great job.

    Reply
    • Author: drolex
    • Posted on: 2013/02/09
    • At: 10:10

    Is there any way to bubble up horizontal swipes to the window? The div that I use this on does not scroll horizontally (I don’t want it to), so, I have to swipe above the div to get horizontal scroll. I tried setting hScroll to false, but that didn’t work.

    Reply
    • Author: Richard bacchus
    • Posted on: 2013/02/11
    • At: 20:56

    I was wondering if in iScroll one can hide the URL bar? The standard javascripts to do so seem to be disabled by iScroll. BTW you create some great code!!!

    Reply
    • Author: NEO
    • Posted on: 2013/02/12
    • At: 08:23

    Does it support IE6,7,8?

    Reply
    • Author: Danny
    • Posted on: 2013/02/19
    • At: 18:34

    Is there a way to make the snap feature snap the element to the center of the view, not the left? It would be nice to add a ‘snapAlign’ option, if not.

    Thanks.

    Reply
    • Author: Deepak
    • Posted on: 2013/02/19
    • At: 19:27

    Don’t know if someone has asked this before…
    I am facing an error while doing zoom….I am trying to use zoom with a carousel or a slide show..
    But on zooming a particular image..if the next or previous image comes into the window..then the slide occurs and inspite of what happens in the zoom..the slides show starts…
    What can I do in this case ?

    Reply
    • Author: Nicolas
    • Posted on: 2013/02/26
    • At: 09:32

    Hi,

    I just see iScroll not working on the new Chrome 25 this morning…

    You know that you could fix it ?

    Thanks for your great script !!!

    Reply
      • Author: hatsuame
      • Posted on: 2013/03/03
      • At: 22:00

      Maybe it was made by Chrome`s event.In Developer tool,we can choose ‘Emulate touch events’ and it works well.So maybe touch events were experiment function in Chrome(desktop),and cannot be used without choosing that.But iscroll using hasTouch = ‘ontouchstart’ in window && !isTouchPad eventually it get wrong result that Chrome have real touch events(in fact no touch events)and will not bind event.So simply change the detection to fix.

      Reply
    • Author: Frank Silva
    • Posted on: 2013/02/27
    • At: 18:55

    Somehow, all iScroll functionality has completely stopped working in Chrome. Not working with my stuff – or anywhere else… even the samples above.

    I have completely unistalled Chrome (Win7x64Pro — including Reg Edit and killed all user stuff) a couple times now. It just will not do iScroll…

    I have been using iScroll 4 for over a year now.. I have developed some apps with it and never had any problems. It is still working fine on iPads etc.. even wife’s pc with same version of Chrome works…

    Has ANYONE else had this problem? Google search yielding no results about this…

    Reply
      • Author: Alexander
      • Posted on: 2013/02/28
      • At: 15:42

      iScroll 4 full is still working with Chrome on Macs. Not sure how this helps, but it might help some geniuses out there identify the problem.

      Reply
      • Author: hatsuame
      • Posted on: 2013/03/03
      • At: 22:02

      change hasTouch(maybe hasTouch = ‘ontouchstart’ in window && !isTouchPad && !isDesktopChrome)to aviod wrong detection in Chrome

      Reply
    • Author: Ben
    • Posted on: 2013/03/01
    • At: 22:22

    I am using iScroll in my project. I have a small issue. Mine is a Note application which functions just like the Native Note app. My issue occurs when I go to the EDIT MODE when i click on the textarea.

    If i have more content in my screen than the screensize. And if i go to the Edit mode (ofcourse the keyboard popups up). It doesnt focus on the very last word. of the text content.
    It either doesnt scroll to the last

    Reply
    • Author: Iki
    • Posted on: 2013/03/07
    • At: 12:27

    I have problems on Chrome ver. 25.0.1364.152 m and Firefox ver. 19.0. There’s no warning or error in console.

    In IE ver. 9.0.8112.16421 is working fine. WTF?!

    I’m stuck in the middle of the project, I’m out of ideas and I cannot continue. Any clue?

    Reply
      • Author: Iki
      • Posted on: 2013/03/07
      • At: 12:29

      And yes… I’m using Windows 7

      Reply
    • Author: Benny
    • Posted on: 2013/03/07
    • At: 15:59

    i fixed iscroll light for IE…
    please add changes to trunk!
    greetings

    — iscroll-lite.js Do Mrz 7 15:56:31 2013
    +++ iscroll-lite.js Do Mrz 7 15:56:31 2013
    @@ -15,6 +15,7 @@
    isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
    isPlaybook = (/playbook/gi).test(navigator.appVersion),
    isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
    + isIE = (!window.addEventListener) || (/MSIE 9/i).test(navigator.userAgent),

    has3d = ‘WebKitCSSMatrix’ in window && ‘m11′ in new WebKitCSSMatrix(),
    hasTouch = ‘ontouchstart’ in window && !isTouchPad,
    @@ -204,7 +205,7 @@
    that.pointX = point.pageX;
    that.pointY = point.pageY;

    - that.startTime = e.timeStamp || Date.now();
    + that.startTime = e.timeStamp || (new Date()).getTime();

    if (that.options.onScrollStart) that.options.onScrollStart.call(that, e);

    @@ -220,7 +221,7 @@
    deltaY = point.pageY – that.pointY,
    newX = that.x + deltaX,
    newY = that.y + deltaY,
    - timestamp = e.timeStamp || Date.now();
    + timestamp = e.timeStamp || (new Date()).getTime();

    if (that.options.onBeforeScrollMove) that.options.onBeforeScrollMove.call(that, e);

    @@ -277,7 +278,7 @@
    target, ev,
    momentumX = { dist:0, time:0 },
    momentumY = { dist:0, time:0 },
    - duration = (e.timeStamp || Date.now()) – that.startTime,
    + duration = (e.timeStamp || (new Date()).getTime()) – that.startTime,
    newPosX = that.x,
    newPosY = that.y,
    newDuration;
    @@ -383,7 +384,7 @@
    _startAni: function () {
    var that = this,
    startX = that.x, startY = that.y,
    - startTime = Date.now(),
    + startTime = (new Date()).getTime(),
    step, easeOut,
    animate;

    @@ -411,7 +412,7 @@
    }

    animate = function () {
    - var now = Date.now(),
    + var now = (new Date()).getTime(),
    newX, newY;

    if (now >= startTime + step.time) {
    @@ -474,15 +475,20 @@
    return { left: left, top: top };
    },

    - _bind: function (type, el, bubble) {
    - (el || this.scroller).addEventListener(type, this, !!bubble);
    - },
    + _bind: function (type, el, bubble) {
    + if (isIE)
    + (el || this.scroller).attachEvent(type, this, !!bubble);
    + else
    + (el || this.scroller).addEventListener(type, this, !!bubble);
    + },

    - _unbind: function (type, el, bubble) {
    - (el || this.scroller).removeEventListener(type, this, !!bubble);
    - },
    + _unbind: function (type, el, bubble) {
    + if (isIE)
    + (el || this.scroller).detachevent(type, this, !!bubble);
    + else
    + (el || this.scroller).removeEventListener(type, this, !!bubble);
    + },

    -
    /**
    *
    * Public methods

    Reply
    • Author: Beloko
    • Posted on: 2013/03/08
    • At: 04:19

    Hi

    Just to say iScroll is a very nice work!!
    Adapted and slide well on any mobile browsers for me.

    Best regards

    Reply
    • Author: lzg
    • Posted on: 2013/03/11
    • At: 02:26

    In this line of code inside the IE8 error, may I ask how to solve?

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

    Reply
    • Author: Shamrik
    • Posted on: 2013/03/15
    • At: 07:20

    Hello.
    Thanks for very intresting component.
    I want to add functionality for ScrollBar – as simple ScrollBar: by draging the mouse at “ScrollbarIndicator” content must moving synchronously, as mousewhell. I cannot add event listener for this element :(
    Thanks for answers!

    Reply
  • Could you please add an option to auto-disable iScroll if the Scroller Height is <= to the Wrapper Height?

    This can be proven very useful when the checkDOMChanges flag is enabled.

    Reply
    • Author: MIT
    • Posted on: 2013/03/17
    • At: 15:14

    Have someone encountered the problem that images aren’t centered in Firefox?

    -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
    -ms-box-orient:vertical;
    -o-box-orient:vertical;
    box-orient:vertical;
    -webkit-box-pack:center;
    -moz-box-pack:center;
    -ms-box-pack:center;
    -o-box-pack:center;
    box-pack:center;
    -webkit-box-align:center;
    -mox-box-align:center;
    -ms-box-align:center;
    -o-box-align:center;
    box-align:center;

    Seems to have no effect. Maybe someone has a hint for me. Thx in advance!

    Reply
    • Author: Jan Paepke
    • Posted on: 2013/03/28
    • At: 16:38

    Something I just came accross: It might be a good idea to introduce a “snapOffset” option. In my case I wanted to have the scrollcontainer snap to certain elements (images), but not right at the screen edge…
    To get it working I added a left padding on the image and an equal negative right margin.
    That did the trick but is rather nasty…

    Reply
    • Author: Paul
    • Posted on: 2013/04/18
    • At: 11:52

    Is it possible to disable drag functionality?

    Reply
    • Author: Alexander
    • Posted on: 2013/06/15
    • At: 17:35

    Is it possible stop sliding when zooming?
    I make gallery what slide images, and want to zoom each image. But when I zoom image and move from left to right (or otherwise) it slide to next element. How to stop this sliding?

    imageScrollGallery = new iScroll(‘wrapper’, {
    snap: ‘li’,
    zoom: true,
    momentum: false,
    hScrollbar: false,
    });

    Thanks for any thought

    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>