> 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: trusktr
    • Posted on: 2012/09/24
    • At: 05:32

    Please, please, please don’t add hash and hash change support. That doesn’t have anything to do with scrolling… Make that separate library. It’s definitely useful in it’s own library, but not in iScroll.

    Reply
      • Author: Dennis
      • Posted on: 2012/09/24
      • At: 12:29

      Of course it does. Hash change and scrolling are connected perfectly: Suddenly you have i.e. a carousel supporting browse forward /back.

      Yes, it is not difficult to support it yourself and interact with iScroll, but the code is probably very cheap performance-wise (a few lines of JavaScript, which doesn’t get called unless you enable the feature), and makes things Just Work with iScroll.

      Reply
    • it will be optional anyway

      Reply
    • Author: DestinyXie
    • Posted on: 2012/09/24
    • At: 06:26

    When I open a key panel or iscroll init before all imgs loaded in the wrapper,the value this.wrapperH is not equal to this.wrapper.clientHeight,so I can not see all the content in the wrapper. so I call the function _checkDOMChanges in _start.and in the function _checkDOMChanges,if this.wrapperH is not equal to this.wrapper.clientHeight then call refresh,it works.
    Someone met this kind of situation?

    Reply
    • This branch may fix your issue:
      (Is it rubber banding when you try to move scroll?)

      Bug resolved was observed in: Safari version Version 5.1.4 (6534.54.16) iOS 4.x Safari

      Scroll failed to work and just sprung back to starting point.

      Issue due to clientHeight in usage case returned the same height for both wrapper and scroller.

      This caused the expected scroll region to be zero. Height = ABS(wrapperHeight – scrollerHeight)

      The wrapper height was pushed to its parent, which returned the correct (viewport) height.

      Here is code:
      https://github.com/meckdahl/iscroll

      Reply
    • Author: Ondrej
    • Posted on: 2012/09/27
    • At: 09:01

    Very very perfect script. Just works nothing to setup, just run. Thank you very much. Working on android 2.2, like a charm, also on other iDevices.

    You saved my day.

    Reply
    • Author: Pack
    • Posted on: 2012/09/28
    • At: 16:52

    hey,
    first of all I wanted to thank you for this perfect working script!
    i would like to know if it’s possible to let the scrollbar disappear in Safari / Firefox / … when there is no user interaction (no hovering for example) .. just the way it disappears in iOS Safari.

    Reply
    • Author: yoavGman
    • Posted on: 2012/09/30
    • At: 13:20

    Is there an event that can tell me when i’m in the end of my list?

    Currently I’m presenting a week of an employer shifts, when he scrolls to the end of the list, i want to add the next shifts to the list (Kind of facebook more posts event when you scroll down the main page)

    Reply
      • Author: Paolo
      • Posted on: 2012/12/03
      • At: 15:26

      there is a onScrollEnd event, you just have to check if the scrolling reached the end

      Reply
    • Author: Prasad
    • Posted on: 2012/10/01
    • At: 09:27

    Hi , I have a problem.I am rendering a page in which I have table data inside list elements.And there are multiple list elements.Also I have implemented horizontal scroll for swiping elements.The vertical scroll is lagging far too much .The horizontal scroll however is functioning smoothly.What could be the problem?Thank oyu

    Reply
    • Author: mnstrkd
    • Posted on: 2012/10/01
    • At: 22:07

    Thank you very much! iScroll works like a charm!

    Reply
    • Author: Alex
    • Posted on: 2012/10/02
    • At: 15:20

    This script is great! But im having a problem where I need to have arrows to click to go to the previous/next page and for some reason it is glitching by moving multiple pages left or right if the swipe is used and then the arrows. Any ideas??

    Reply
    • Author: Luke
    • Posted on: 2012/10/03
    • At: 01:24

    Hey, it’s a really cool script, but I unfortunately can’t handle with one thing. I have multiple things in my HTML, there I attach iScroll and it works. But how to get instance of existing iScroll in order to refresh it? Now I create new iScroll instance, although iScroll is working and execute refresh method(). This probably causes the script working not very nice. Finally, the question is: How to get instance of existing iScroll for a selected ?

    Reply
    • Author: dom
    • Posted on: 2012/10/04
    • At: 11:26

    How can I make this iScroll to work with table and only to scroll table body?

    Reply
    • I have done this, but required hacking inside the iScroll code. Basically had to look at the function which moves the content and scroll associated titles (top row and left column elements) in sync with the main body. Sadly, the titles cannot be part of the same table so you either have to have fixed column widths and row heights, or have a routine to sync them up on load and every time something changes. Will post a URL when this is live in a few weeks.

      Reply
  • A nice refinement would be to also allow scrolling by dragging the scrollbars. In a page designed to be viewed either on a mobile or desktop (i.e. mouse/pointer interface), dragging the scrollbars is what users expect.

    Reply
  • I need to be able to click on a link within a listitem and have that listitem move to the top of the view. Is there anyway to do this.

    Thanks for your help and a great component.

    Reply
    • Author: Sasha
    • Posted on: 2012/10/08
    • At: 16:05

    Hi Iscroll team! First of all – thank you for your great job! It is very helpfull plugin for our developers, and also works almost perfect. But we have some problem, and we hope you can help us to solve that.

    For example: we have horizontal iscroll wrapper that covers 100% of width and height of screen. We are in landscape mode and page has vertical scroller. When page loads we see header at the top. But it is impossible to scroll page down to the footer. Only horizontal swipe is active! Can it be solved somehow?

    Thanks in advance. And one more time – your plugin is great.

    Reply
      • Author: Dave clark
      • Posted on: 2012/10/21
      • At: 17:39

      I have the same problem

      Reply
        • Author: Sasha
        • Posted on: 2012/10/26
        • At: 15:27

        Hi Dave. We didn’t hear anything from iScroll team about our question, but the following works for horizontal iscroll (i think it may influence on vertical iscroll behaviour, but we didn’t tried it yet).

        So, replace the following
        ——onBeforeScrollStart: function (e) { e.preventDefault(); },——-

        with:
        ——onBeforeScrollStart: NULL,——

      • Author: yellow
      • Posted on: 2012/12/20
      • At: 15:27

      hellow!
      Hope this code will be of help to you.
      myScroll = new iScroll(‘home_ad’, {
      snap: true,
      momentum: false,
      vScroll: false,
      hScrollbar: false,
      onBeforeScrollStart:function(e){
      e.preventDefault();
      oTouch1 = e.touches[0];
      ad1_x = oTouch1.pageX;
      ad1_y = oTouch1.pageY;
      },
      onBeforeScrollMove:function(e){
      oTouch11 = e.touches[0];
      ad1_moveY = oTouch11.pageY;
      ad1_move_y = Math.abs(ad1_moveY – ad1_y);
      ad1_move_y1 = ad1_moveY – ad1_y;
      if(ad1_move_y1 = scrollY1){
      window.scrollBy(0,scrollY1);
      }else{
      window.scrollBy(0,ad1_move_y);
      };
      }else if(ad1_move_y1 > 0){
      if(window.scrollY – ad1_move_y <= 0){
      window.scrollBy(0,0);
      }else{
      window.scrollBy(0,-ad1_move_y);
      };
      }
      },

      Reply
    • Author: Ishan
    • Posted on: 2012/10/09
    • At: 14:37

    i have used iscroll to scroll a table on my html page (Start Page)
    using the parameter snap :tr (row)…
    i found that my onClick event of the td tag doesnt FIRE !!!!

    Is it possible to fire ???
    i am using phonegap and sencha touch -1

    Reply
    • Author: Soma Roy
    • Posted on: 2012/10/10
    • At: 13:50

    Hi’
    Thanks for sharing this. I have used it it’s working superfine on all the browsers and platform except on Blackberry mobiles. Can anything be done to make it work on Blackberry also. Please reply soon.

    Reply
    • yes, I would need some blackberry devices :)

      Reply
    • Author: Dean
    • Posted on: 2012/10/10
    • At: 16:51

    I have tried to get you script to work without success. I am using Dreamweaver latest version and the scroll functions work fine in the webkit emulation but does not work when trying any other browser. It appears that there is some error with the way the wrapper window size is calculated. In other browsers I get scrollbars and my list is fully visible if I use the scroll bars. I tried your code out of the box as is and it does not work proplerly.

    Reply
    • Author: Jacky
    • Posted on: 2012/10/14
    • At: 19:25

    Can iScorll works in both vertical and horizontal pull to refresh in same screen? What I want to make is a 2D matrix scrolling.

    Reply
    • I think it’s technically feasible, but not out of the box :)

      Reply
    • Author: ico
    • Posted on: 2012/10/15
    • At: 13:55

    how can this work if i want it to work on two div on the same page?

    Reply
      • Author: Meera
      • Posted on: 2012/11/06
      • At: 09:04

      create separate instance for the second div also…

      Reply
  • Hey i am using iScroll 4 in a web app that i am gonna turn it into iphone application using phonegap build. i implemented the pull to refresh method into it, it is working fine on the browser (Ipad/safari) but when i build on phonegap it doesn’t work properly. please help anyone knows about Phonegap/iScroll pull to refresh bug?

    Reply
      • Author: Joe Donnelly
      • Posted on: 2012/11/19
      • At: 20:32

      Did you ever find a solution for this? I am having the same issue

      Reply
    • Author: Chetan Merai
    • Posted on: 2012/10/18
    • At: 12:23

    I want to use pinch zoom. I am facing problem with Android 2.3.3 where double tap is working but using pinch zoom is not working.

    any suggestion?

    Reply
    • Author: Angela
    • Posted on: 2012/10/18
    • At: 19:40

    Nice control… Evaluating it for use. However, I am finding that the pinch/zoom for ipad 2 iOs 6.0 is completely disabled on the entire web page.

    so if I have a web page that has a div that scrolls and another div that doesn’t If I try to zoom in the area where it is not the scrollable div it doesn’t work.

    If I take your example of zoom and try to pinch/zoom on those divs it does not work.

    Basically Pinch and zoom doesn’t work.

    I am using this piece of software of yours cubiq-iscroll-1e54499 which is what I got when I clicked download.

    Any help is greatly appreciated.

    Reply
    • thanks for the report, I’ll have a look at it.

      Reply
    • Author: DDTech
    • Posted on: 2012/10/19
    • At: 16:36

    Matteo,

    thanks for iScroll. I’m usining it since version 2 or even longer…lovely..

    I have just done minor tweaks to the “Pull to refresh” – demo of version 4.2.4.

    in the onRefresh function I’ve added the line

    this.maxScrollY = this.maxScrollY + pullUpOffset;

    in order to make iScroll only up to the last true option excluding the pullUp-div

    and in onScrollMove I replaced

    ...
    } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
        pullUpEl.className = '';
        pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
        this.maxScrollY = pullUpOffset;
    
    

    with

    ... 
    } else if (this.y > 
      (this.maxScrollY - 5 - pullUpOffset) && pullUpEl.className.match('flip')) {
        pullUpEl.className = '';
        pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
        //this.maxScrollY = pullUpOffset;
    
    

    This way the behavior is the same as on the top.

    Reply
    • Author: clint
    • Posted on: 2012/10/22
    • At: 12:25

    How can i get the scrollbar location(x,y coordinates) dynamically when a user has changed the default scrollbar location. Is this feature available already or in pipeline.

    Reply
    • Author: TheAl
    • Posted on: 2012/10/22
    • At: 18:25

    I am looking for anything like a callback feature to get informed when the initialization has finished.
    Or do I have to poll the isReady() function? I think this is not the correct function for this.

    I expect iscroll needs to be patched for this. Maybe in line 187 (iscroll 4.2.2)?

    Reply
    • Author: vuluc88
    • Posted on: 2012/10/23
    • At: 04:00

    Does it support mousewheel?
    Or is there anyway to simply modify it to do so?

    Reply
      • Author: vuluc88
      • Posted on: 2012/10/23
      • At: 04:28

      Ok i used jquery.mousewheel with your ScrollTo and it work easily

      Reply
        • Author: vuluc88
        • Posted on: 2012/10/23
        • At: 09:40

        but will it be any conflict risk? Since my site will be mostly viewed in mobile device, the usage of additional js plugin should be reduced as much as possible.

    • yes, it does

      Reply
        • Author: vuluc88
        • Posted on: 2012/10/24
        • At: 04:03

        Sorry, I meant the horizontal. Like when i roll the mouse wheel, the list will roll right and left.
        So i think i need to modify event in the js file right. Can anyone help?

    • Author: Scott Wojan
    • Posted on: 2012/10/24
    • At: 22:35

    Thank you so much for iscroll!!

    Reply
    • Author: LAA kiroskirin
    • Posted on: 2012/10/31
    • At: 12:36

    Great plugin, many thanks

    Reply
    • Author: banana
    • Posted on: 2012/10/31
    • At: 13:43

    hi, thanks for this script

    i got problems on orientation change, the browser may not finish the relayout on change, and setTimeout(refresh, 6000) could not make sure you get the right scroll values.

    Reply
      • Author: banana
      • Posted on: 2012/10/31
      • At: 14:45

      i move the compute part (e.g. maxScrollY, scrollbarY) out, and do computation when _pos

      it satisfy me though may cost and still not perfect

      Reply
    • Author: Kunal
    • Posted on: 2012/11/06
    • At: 09:36

    Hi Iscroll team my ihave try to iscroll on IE7 ,IE8 but not working its showing error in line “document.addEventListener(‘DOMContentLoaded’, loaded, false);”
    it showing error “Object doesn’t support property or method ‘addEventListener’ ”
    Please help.

    Reply
      • Author: Mikhail Fedosenko
      • Posted on: 2012/11/06
      • At: 11:59

      Added an answer below.

      Reply
      • Author: Mikhail Fedosenko
      • Posted on: 2012/11/06
      • At: 12:00

      if (!_checkbox.addEventListener) {
      _checkbox.attachEvent("onclick", doSomething);
      }
      else {
      _checkbox.addEventListener("click", doSomething, false);
      }

      Reply
        • Author: Kunal
        • Posted on: 2012/11/07
        • At: 05:18

        Thanks for replay MIKHAIL.I will try this.

    • Author: Nick
    • Posted on: 2012/11/07
    • At: 06:36

    Anyone tested with IE10/Win Mobile8 yet?

    Reply
    • Author: Vitalik Zaidman
    • Posted on: 2012/11/07
    • At: 12:04

    suggesting to change isReady as following:
    isReady: function () {
    return !this.moved && !this.zoomed && !this.animating && (!this.options.snap || this.pagesX[this.currPageX] == this.x);
    }

    Reply
    • Author: Paulius
    • Posted on: 2012/11/09
    • At: 09:18

    Hey! Thanks for nice script. Works greith!
    Just i get problems with form fields becouse i really need that…do you know then you will manage to fix this bug?
    Thanks

    Reply
    • Author: Ahmet Serhat Kilinc
    • Posted on: 2012/11/15
    • At: 18:54

    OMG Thank you so so much it worked the second time i tried, is there a way of putting this script in the format?

    Reply
      • Author: Ahmet Serhat Kilinc
      • Posted on: 2012/11/15
      • At: 18:55

      TABLE* fotmat?

      Reply
    • Author: Paul
    • Posted on: 2012/11/16
    • At: 01:42

    Hi, is there anyway to disable mouse dragging events (mouse down/up) in the options and to only allow scrolling with the mouse wheel?

    Thank you

    Reply
      • Author: Paul
      • Posted on: 2012/11/16
      • At: 13:14

      Answered my own question. A simple “scroller.disable();” if its not a touch device does exactly what I was looking for!

      Thank you

      Reply
  • Hello, i think that i saw you visited my website so
    i came to “return the favor”.I’m trying to find things to enhance my website!I suppose its ok to use some of your ideas!!

    Reply
    • Author: Paolo
    • Posted on: 2012/11/21
    • At: 17:13

    Hi, I have found your work very helpful, however I am stuck with a problem: I would like to register for when the scroll reaches its end to add more content to the list I am currently viewing (kinda like Facebook news feed). As far as I have seen it is not possible with current iScroll implementation. Any advices on that?/Are you currently working on it?
    thanks

    Reply
      • Author: Paolo
      • Posted on: 2012/12/03
      • At: 15:35

      solved

      Reply
    • Author: Emanuele Ricci
    • Posted on: 2012/11/22
    • At: 14:49

    Does the scrollTo method has a callback parameter?

    Reply
    • Author: Ali
    • Posted on: 2012/11/26
    • At: 01:47

    I use target-densitydpi=233 and I got strange result on android 2.2 but not 4.

    Reply
    • Author: LAA kiroskirin
    • Posted on: 2012/11/27
    • At: 04:57

    On my page i have many scrollbar then i want to set them can drag a scrollbar so I set draggableScrollbars: true but not working with mac book air 13.3 inch.

    But on the example it working well

    hmm. do I miss something.

    Reply
    • Author: Silbo
    • Posted on: 2012/11/30
    • At: 09:18

    hi how to do a auto scroll and when finger scroll it, stop the auto, finger stop the auto goon~

    poor english !!-_-

    Reply
    • Author: Hamilton Teixeira
    • Posted on: 2012/11/30
    • At: 15:10

    Really good quality…i have some issues to fix on my mobile app to work with…but is a great job…tks for sharing

    Reply
    • Author: Seno
    • Posted on: 2012/11/30
    • At: 15:13

    Is there any way to get around the problem, of input fields not working? Thanks

    Reply
    • Author: Mauro
    • Posted on: 2012/12/01
    • At: 12:30

    Hi, good work!!!
    I’ve a problemi with this structure:

    The div #one, #two and #three have a position absolute for a css animation, the iscroll don’t scroll, it remains locked on top and i cant’ scroll… can you hel me?

    Thanks

    Reply
      • Author: mose
      • Posted on: 2012/12/30
      • At: 22:50

      Got the exact same issue.

      Reply
        • Author: mose
        • Posted on: 2013/01/04
        • At: 14:24

        ok this was because my div being built dynamicaly it had to call the refresh() after declaring the scroll.

    • Author: Paolo
    • Posted on: 2012/12/03
    • At: 15:34

    Hi guys, I have found a strange bug happening with iScroll: I am using iScroll to make a carousel.. it works perfectly but there is a textinput field which I cannot anymore select to write something into it. Have you experienced something like that ?

    Reply
    • Author: wuyahuang
    • Posted on: 2012/12/28
    • At: 06:22

    Hi,MATTEO,I’m developing mobile webapp in China.I have to say this framework is very outstanding.

    Reply
    • Author: mose
    • Posted on: 2013/01/04
    • At: 14:34

    oh there is one typo on this page, in “Javascript scrolling” it says:

    If snap is active you can also use the snapToPage(pageX, pageY, time) function

    where it should say

    If snap is active you can also use the scrollToPage(pageX, pageY, time) function

    Reply
    • Author: Muhammadibn
    • Posted on: 2013/01/06
    • At: 09:04

    Hi, thanks for the great script. I wanted to ask if it’s possible to keep the top and bottom bar when opening a PDF doc in a web app?

    Thanks

    Reply
    • Author: stefan
    • Posted on: 2013/01/06
    • At: 17:22

    I found that a link performs not well in iscroll 4. It is easily triggered than without iscroll. What’s the reason.

    Reply
    • Author: Cris
    • Posted on: 2013/01/07
    • At: 04:11

    I do have a question. I am using this addon, but for Destops the scroll only transforms an object 10px each scroll tick. The default is 100px. How can I change this amount in the script.

    Reply
      • Author: Cris
      • Posted on: 2013/01/07
      • At: 04:18

      Nvm I found the scroll math in function _wheel, you can delete my last comment.

      Reply
    • Author: Bram
    • Posted on: 2013/01/07
    • At: 10:12

    Is there a way to prevent the event of scrollable element from getting fired? For example when I apply iScroll to a list that contains anchors, the browser activates the hyperlink when I’m scrolling and this is not wanted.

    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>