> 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: jon
    • Posted on: 2012/03/13
    • At: 11:11

    Firstly, thanks alot for this.. it is awesome… My question… I have implemented this using the snap to element… Some of the elements that it snaps to also have touch events… the problem is that when you try and interact with these elements the scrolling action also occurs… basically is there the equivalent of preventDefault(); but for the iscroll?… thanks again J

    Reply
      • Author: jon
      • Posted on: 2012/03/13
      • At: 11:34

      Simple…
      event.stopPropagation();
      Thanks me!

      Reply
        • Author: Bruno
        • Posted on: 2012/04/13
        • At: 20:36

        Can you be a little more specific? Where should this code go? Thanks

        • Author: Rider
        • Posted on: 2012/06/28
        • At: 13:07

        Thanks you! :) Helped me a lot!

        • Author: Rider
        • Posted on: 2012/06/28
        • At: 13:09

        Bruno, this code goes to params definition.

        Ex.
        myScroll = new iScroll(“popupBody”, {
        onBeforeScrollStart: function (e) {
        e.stopPropagation();
        }
        });

    • Author: hasen
    • Posted on: 2012/03/14
    • At: 01:10

    We found a problem where we couldn’t set focus to input fields in iOS 5, and this SO answer had the solution: http://stackoverflow.com/a/5769405/35364

    I just changed the selector to $(“input,textarea”)

    $(“input,textarea”).on(‘touchstart’, function(e) {
    e.stopPropagation();
    });

    Reply
  • Really nice work! but i’m facing a problem.

    I’ve an bg image, that has 2050px height, ok, using iscroll to function on ipad, no problem.

    But, almost on the botton of the image, i need to include an animation, some bubbles moving aroud…. But, there is my problem, when i put margin-top or top:2000px, it just wont appear… because the iscroll area finishes on the 1024px…. what can i do, to this animation stay on the botton of the page, and only shows when i scroll down the img?

    Thanks!

    Reply
      • Author: Edwin
      • Posted on: 2012/04/05
      • At: 20:26

      I believe iScroll doesn’t detect the height of the element correctly if you have elements that are absolutely positioned. Try to use relative positioning and it should work.

      Reply
        • Author: wdsolution
        • Posted on: 2012/06/15
        • At: 18:51

        Hello. We had exactly the same problem as Eduardo (among other problems) and changing to relative positioning fixed the issue. The othe problems were fixed by reading the comments below so i would like to thank you for your great help

    • Author: Alain
    • Posted on: 2012/03/14
    • At: 22:36

    Hello,
    Do you have a sample to use iscrol with jquerymobile
    the problem is ok when I have one page but is nt run when I have 2 pages why ?
    thank’s

    Reply
      • Author: Charley
      • Posted on: 2012/03/21
      • At: 09:20

      jQuery Mobile caches a lot of files and any parts of the page that don’t change. It’s possible that iScroll is not instantiating on the new page – calling the refresh() method might resolve this reset your iScroller

      Reply
      • Author: Brock
      • Posted on: 2012/03/22
      • At: 22:31

      I’m using iscroll with jqm and dont have any issues. make sure you remember put the active class in front of it when you activate it though.

      ex: new iScroll($(“.ui-page-active #mainImage”).get(-1)

      Reply
        • Author: Brock
        • Posted on: 2012/03/22
        • At: 22:36

        oh and here’s the site, we’ve had it production for 6 months or so. i’m upgrading it to the latest jqm and iscroll versions now actually.

        http://m.thecorner.com/us

        • Author: Roger
        • Posted on: 2012/04/01
        • At: 17:43

        Hi, but how could you deal with different duplicate ids across different pages?

        like wrapper, scroller etc.

        Since jqm load these pages into 1 DOM if you do’t use rel=external

      • Author: Jon Tara
      • Posted on: 2012/04/12
      • At: 03:20

      I’ve written a new widget plugin for JQuery Mobile that makes it very easy to use iscroll4 in JQuery Mobile projects.

      You can find it at https://github.com/watusi/jquery-mobile-iscrollview

      There is an announcement on the iscroll4 support forum at https://groups.google.com/forum/#!topic/iscroll/oQsmrr5Ahcs

      Reply
        • Author: vasu
        • Posted on: 2012/04/18
        • At: 11:36

        but, still “data-filter” is problem.. please help me.

    • Author: Jono
    • Posted on: 2012/03/15
    • At: 18:31

    I keep getting an error with the iscroll –
    Uncaught TypeError: Cannot read property ‘style’ of null

    Is it possible to implement the ONDOMCONTENTLOADED solution in Backbone framework?

    Reply
    • Author: Nizzy
    • Posted on: 2012/03/15
    • At: 22:23

    Avoid using “-webkit-box-shadow” CSS property in the scrolling area. It slows down the scrolling tremendously.

    Reply
    • Author: Alex Matchneer
    • Posted on: 2012/03/19
    • At: 04:42

    Hi, I use iscroll lite, and it seems like mousewheel (or Mac two-finger scroll gestures) events aren’t scrolling the iscroll frame. Is there a way to fix this, or is this something I’ll just get for free with the full version of iscroll?

    Reply
    • yes, mouse wheel is stripped out from iscroll lite. You may want to cut and paste that functionality back from standard iscroll

      Reply
        • Author: Alex Matchneer
        • Posted on: 2012/03/19
        • At: 15:54

        Awesome! Pretty good so far, but I’m getting some wacky results as the scrolling container reaches the end of scrollable content, and it seems to be because of how many scroll events are automatically generated by Mac’s penchant for mousewheel momentum. Basically, if I scroll downward and reach the end, it just suddenly stops and I lose a lot of the nice momentum I get when you click and drag quickly (flick). If I scroll upward, there’s no strong cutoff but there’s a lot of jittery behavior as it reaches the top, but my Mac’s still sending it scroll events from its own internal scroll momentum. Any ideas? Thanks for a wonderful lib!

    • Author: ACAO
    • Posted on: 2012/03/20
    • At: 04:56

    Thank you so much for the solution!
    It saved my day!

    Reply
    • Author: Danilo
    • Posted on: 2012/03/20
    • At: 12:30

    nice Work!

    I like it very much! I used it in several iPad web-Projects without any problems or performance issues.

    Thank you!

    Reply
    • Author: Johnston Freeman
    • Posted on: 2012/03/23
    • At: 10:49

    Hi, brilliant project, I was also entranced by the spinning cube on your logo, how’s that done then? :-)

    Reply
    • Author: Matt Black
    • Posted on: 2012/03/23
    • At: 23:00

    Hey there,

    Is it possible for the and to be classes (ie. ?

    I’ve tried this with no success, and I thought I’d pop on here to see what you folks with the bigger brains had to say! =)

    Reply
      • Author: Matt Black
      • Posted on: 2012/03/23
      • At: 23:02

      So that last comment didn’t work out so well – should have known. What I was trying to ask was… can the ‘div id=”scroller”‘ and ‘div id=”wrapper”‘ be classes instead of id’s?

      Reply
      • Author: rawi rai
      • Posted on: 2012/05/15
      • At: 04:58

      hello Matt

      i’m looking for same id to class. did find out any solution !

      Reply
        • Author: sorensong
        • Posted on: 2012/06/11
        • At: 22:39

        also looking for this functionality.

      • the first parameter can be an element reference. You can call iscroll as follow:

        new iScroll(document.querySelector('.className'));

    • Author: Pauld
    • Posted on: 2012/03/24
    • At: 09:57

    Can this work on Windows phone too or how to make it work? what about blackberry?
    Thanks

    Reply
    • Author: name
    • Posted on: 2012/03/26
    • At: 23:25

    Is it possible to combine the carousel with the simple scroller?

    What I mean is, swiping left or right would move you through the items in the carousel, but swiping up and down would allow you to scroll the content if it happens to be taller than the viewport? I have a page turner iPad app in which the carousel functionality will take you through the pages of content, but the odd page may have more content than is visible, so the up/down swiping action would be necessary to scroll the content out of view.

    Reply
    • Author: Tom
    • Posted on: 2012/03/26
    • At: 23:37

    When you have only a few list items inside the iscroll (so that the list doesnt fill your entire screen)
    and then scroll down, the scrollup will execute automatically after scrolldown has finished.
    When you scroll up, ony the scroll up is being executed which is correct.

    As soon as the list fills the entire screen
    scrollup won’t be executed automatically
    which is correct.

    How can i stop the scrollup being executed automatically when i scroll down and the list doesnt fill the entire screen?

    YOU CAN SEE THIS IN THE DEMO WHEN REMOVE ALL LI ITEMS EXCEPT 2 OR SO…

    Reply
    • Author: Mary Ward
    • Posted on: 2012/03/27
    • At: 11:51

    You have made my day! This is a pretty nice solution! I liked it. I used it in several iPad web-Projects. It works perfectly there!
    http://9pillsonline.com/

    Reply
  • Hi Matteo! Thanks for this great script. We are using ISCROLL for touch devices in our web application called AJAX-ZOOM (http://www.ajax-zoom.com). It is used for vertical gallery replacing jScrollPane on desktop browsers.

    Reply
    • Author: GilbertSun
    • Posted on: 2012/04/01
    • At: 08:04

    Thanks for your source,i want to know when i use the SNAP AND SNAP TO ELEMENT,can i set it auto slide,and which option should i set,sorry for my poor english,i’m from china

    Reply
    • Author: Torsten
    • Posted on: 2012/04/02
    • At: 12:53

    The Windows Phone Demo is using iScroll too:
    http://m.microsoft.com/windowsphone/en-us/demo/

    Reply
    • I worked on the Win Phone Demo ;)

      Reply
        • Author: Ben
        • Posted on: 2012/04/27
        • At: 15:49

        If you try and browse the demo in the Windows Phone Emulator, you get the message:

        Hello… if you are looking for our demo, but you’re already using Windows Phone.

        Which is annoying, because I want to see how well Windows Phone handles iScroll4!

    • Author: Simon Thomsen
    • Posted on: 2012/04/03
    • At: 09:55

    Hi guys,
    I’ve a little question about using iScroll multiple times on the same page.

    I’ve tried with this code:

    var scroll1, scroll2;
    function loaded() {
    scroll1 = new iScroll(‘wrapper’);
    scroll2 = new iScroll(‘wrapper_2′);
    }

    But it doesn’t work. Anyone have a solution for this?

    Reply
      • Author: Tom Scott
      • Posted on: 2012/05/11
      • At: 01:46

      These two methods worked for me:

      Solution 1. Include inline code below the HTML…

      var myScroll; myScroll = new iScroll( 'wrapper1' );
      var myScroll2; myScroll2 = new iScroll( 'wrapper2' );

      Solution 2. Use jQuery to do it for you (each wrapper still must have a unique ID)


      var carousels = {};
      $(document).ready(function(index){
      $('.wrapper').each(function() {
      carousels[index] = new iScroll( $(this).attr('id') );
      });
      });

      Reply
      • Hi Tom, i’m a bit of a jquery noob, any idea how i code this as jquery?

        var myScroll; myScroll = new iScroll( ‘wrapper1′ );
        var myScroll2; myScroll2 = new iScroll( ‘wrapper2′ );

    • Author: Lala Waghmode
    • Posted on: 2012/04/11
    • At: 13:17

    Hi, Its great one

    I am using this library,In scrolling part there are other elements like input box,button but that are disabled, anyone have solution to enable

    Reply
      • Author: Peter
      • Posted on: 2012/04/18
      • At: 12:35

      check example code (downloaded) under “form-fields” folder . it have resolution to this.

      Reply
    • Author: vasu
    • Posted on: 2012/04/16
    • At: 15:00

    my ‘before’ pseudo class contents hiding when I use iScroll4. any suggestion plz?

    Reply
    • Author: Peter
    • Posted on: 2012/04/18
    • At: 12:33

    its great script! I have one issue, my content have some images, that images width/height is managed from css, mean I need to resize image based on screen resolution.

    .landing-page-icon-grid div img{
    max-width: 110px;
    width:100%;
    }

    but now scrolling is not working with actual height. its scrolling just half of the content. what could be the resolution to use responsive design for iscroll

    Could you please help me on this?

    Thanks
    Peter

    Reply
    • Author: justino
    • Posted on: 2012/04/18
    • At: 18:00

    how do i make this autoplay?

    Reply
      • Author: Janak Patel
      • Posted on: 2012/05/17
      • At: 12:26

      Try this…
      How to start:

      $(‘#mScroll > div’ ).autoSlider({
      timerGap : 4000,
      numberOfSlidingItems : 4,
      slidingItemsWidth : 100,
      scrollDuration : 2000
      }).start();

      Hot to stop:

      $(‘#mScroll > div’ ).autoSlider().stop();

      //function
      var scrollToItem = 1;
      jQuery.fn.autoSlider = function(){
      var elem = $(this);
      var args = arguments[0] || {};
      var interval = args.timerGap;
      var _slidingItemsWidth = args.slidingItemsWidth;
      var _numberOfSlidingItems = args.numberOfSlidingItems;
      var _scrollDuration = scrollDuration;

      var start = function(){
      setInterval(function(){
      if(scrollToItem != -1 ) {
      if(scrollToItem == _numberOfSlidingItems) {
      scrollToItem = 1;
      myScroll.scrollTo(-(_slidingItemsWidth * _numberOfSlidingItems),0, 1000, true);
      } else {
      myScroll.scrollTo((_slidingItemsWidth), 0, _scrollDuration, true);
      scrollToItem ++;
      }
      }
      },interval);
      };

      var stop = function() {
      scrollToItem = -1;
      };
      return {
      start: start,
      stop: stop
      }
      };

      Reply
    • Author: Meathill
    • Posted on: 2012/04/24
    • At: 08:35

    Hi, thanks for such a nice work.
    I want to listen some events or add some callback to it, for doing some job like removing invisible tags. But I didn’t find any documents on this. Would you please give me some suggestion?

    Reply
      • Author: Meathill
      • Posted on: 2012/04/24
      • At: 12:25

      OK, I found them in the iscroll.js file, about line 99 to 110.

      Reply
    • Author: A
    • Posted on: 2012/04/24
    • At: 10:06

    After using scrollIntoView() for a link button which is inside the wrapper, I am unable scroll to the top, but scrolling at the bottom works? I tried to use refresh after setting scrollIntoView()

    Reply
    • Author: lanny
    • Posted on: 2012/04/24
    • At: 22:46

    what is the topOffset supposed to be?

    If the ‘scroller’ is and start at a height then grows to a max height and then changed to its overflow:auto; height:300px; does it need to reset something, the minScrollY?

    seems
    in _move()

    the newY >= that.minScrollY || that.maxScrollY >= 0 ? that.minScrollY : that.maxScrollY;

    will always have newY == 0, because of that.minScrollY==0 || that.maxScrollY ==1

    so no scroll is happening.
    Anything I might missed?
    Thanks in advance.

    Reply
    • Author: Francesco Bertelli
    • Posted on: 2012/04/25
    • At: 23:09

    Ciao Matteo, what about a leftOffset value?

    Reply
    • Author: Francesco Bertelli
    • Posted on: 2012/04/25
    • At: 23:39

    do you think there is a way where you can use iScroll to create a Coverflow style carousel, wher eyou can see a little portion of the next and previous slide?

    I’m trying to hack you code adding a left offset, but having hard time to understand which direction to follow

    thanks

    Reply
      • Author: Daniël
      • Posted on: 2012/08/03
      • At: 13:55

      I’m trying the same thing, have you found a solution?
      Thanks!

      Reply
    • Author: Luke Taylor
    • Posted on: 2012/05/02
    • At: 16:02

    I want to be able to either add/reduce the number of li’s, which I can do in the HTML but can’t seem to see the JS which is responsible for this action. It causes me to either see too many blank li’s or not enough to keep on scrolling through.
    I am using the snap to element iScroll.
    Thanks

    Reply
    • Author: john lung
    • Posted on: 2012/05/03
    • At: 10:18

    why the iscroll 4 in ie6~ie8 can’t work?

    Reply
  • Why viewers still use to read news papers when in this technological world
    the whole thing is presented on web?

    Reply
    • Author: Nils
    • Posted on: 2012/05/07
    • At: 17:50

    Great Script!

    Reply
    • Author: Andrew Herbert
    • Posted on: 2012/05/10
    • At: 22:54

    Is there a way to determine if a particular image is visible in the scrolling div? Is it something you can check with the ‘onScollEnd’ event?

    Reply
    • Author: Andrew Herbert
    • Posted on: 2012/05/10
    • At: 22:55

    Should have mentioned I’m not using JQuery (trying to make this lean)…

    Reply
    • Author: Carlin Canales
    • Posted on: 2012/05/16
    • At: 03:03

    Hi. I started using iScroll and i love it. the only question i have is how to make an li element clickable. right now i have a touchend on the li’s using the id of the li. the problem is when i start to scroll it registers that touchend and automatically fires the function i have for the touchend of the li. i want to be able to scroll and stop the scrolling without firing the touchend. this works with sencha but i hate sencha. was wondering if this is possible with iscroll.

    Reply
    • Author: author
    • Posted on: 2012/05/16
    • At: 16:07

    We stumbled over here coming from a different website and thought
    I might as well check things out. I like what I see so i am just following you.
    Look forward to exploring your web page repeatedly.

    Reply
    • Author: Janak Patel
    • Posted on: 2012/05/17
    • At: 12:16

    Hi, I have noticed I cant scroll the page up/down by dragging an iScroll enabled area. Any sugestions?

    Thanks.

    Reply
    • Author: Ragunath Chakravarthi
    • Posted on: 2012/05/19
    • At: 00:05

    Hi

    I am planning to create a mobile website, which is supposed to scroll from one page to another.

    How do i do this….

    Can there be different HTML Pages ?

    Reply
    • Author: Alexander
    • Posted on: 2012/05/23
    • At: 04:59

    Hi there. I am successfully using iScroll4 on a mobile website but there is a specific issue I can’t find a solution for.

    Imagine your demo with simple LIs. Image each LI contains an anchor A ta and there is a css rule like a:active {background:blue} for example. Now, when I touch one of the anchors inside the scroller and start scrolling, the a:active rule is triggered and the corresponding anchor stays blue for all the duration of the scroll, which is not the desired effect.

    Reply
    • Author: Jackson
    • Posted on: 2012/05/25
    • At: 13:25

    Plugin even works with wrapper set to overflow hidden;position:relative

    plugin works very well on iphone etc. BUT::: with an android i stumble across a lot of Problems, cant scroll far enough wrong calculated scrollbar etx.. i tested all examples. just 1 with minor features is working , but isnt scrolling smooth upwards.

    Tough a very nice Plugin !

    Reply
    • Author: Jorge
    • Posted on: 2012/05/28
    • At: 21:56

    Hi,

    Thanks for the script.

    I plan to use it because on iOS 4.x I have an issue. Using your demo example form-fields, if I have input fields (for example for filling out a registration form) and I scroll up or down from a text field, header or footer moves!!!! That only happens with iOS 4.x.

    Any help?

    I need compatibility with iOS 4.x

    Thanks!

    Reply
    • Author: JCO
    • Posted on: 2012/05/29
    • At: 16:30

    Is it possible to destroy the scroller if the div content scroller is less than the div wrapper? I have a problem, I can’t stop the scroll after I go to the next page with less content in div scroller in a same master page. On the other hand, if after I press refresh button, I can’t scroll the next page with more content inside the div scroller. How to handle this? Thanks for helping!

    Reply
    • Author: Devin
    • Posted on: 2012/05/31
    • At: 14:16

    Hi there

    Awesome project! I just started using iScroll4 and it seems to be working really smoothly.

    I am however having a problem preventing the click event bound to my rows. My rows are set to expand to show more information when clicked and contract if clicked again. How do I prevent this click event from firing when the user is actually scrolling the grid rows?

    Thanks so much, Devin

    Reply
    • Author: tarun
    • Posted on: 2012/06/01
    • At: 09:16

    Can i get any example on how we can implement barrel(continues carousels) swipe for menu bar items in scroll.

    Reply
    • Author: Maak
    • Posted on: 2012/06/02
    • At: 08:43

    is this all redundant now that we have

    .elementIWantToScroll{ -webkit-overflow-scrolling: touch;}

    Reply
  • One of the projects I’m working on would have made it a little easier if I could do a “scrollTo” based on an ID name rather than an element like ‘li:nth-child(10)’… so I hacked one up real quick:

        scrollToId: function (el, time) { // ADDED 6/3/2012 DRSJR
            var that = this, pos;
            el = document.getElementById(el);
            if (!el) return;
     
            pos = that._offset(el);
            pos.left += that.wrapperOffsetLeft;
            pos.top += that.wrapperOffsetTop;
     
            pos.left = pos.left > 0 ? 0 : pos.left  that.minScrollY ? that.minScrollY : pos.top < that.maxScrollY ? that.maxScrollY : pos.top;
            time = time === undefined ? m.max(m.abs(pos.left)*2, m.abs(pos.top)*2) : time;
     
            that.scrollTo(pos.left, pos.top, time); 
     
        },
    

    Place it between the scrollToElement and scrollToPage functions, and call it with scrollToId(‘[div or element id]‘,’[time to scroll in ms]‘);

    Reply
  • The control feels like a charm! Thank you.

    Although for some reason, on my vertical scroll I am able to scroll past the bottom edge, without being snapped back to the last element, to keep an entire list in view. After I resize the browser page, everything snaps to where it should be and just works. Anyone encountered the same problem?

    Reply
    • Figured it out. Happened due to the fact, that overflow: auto was set for wrapper element ;)

      Reply
    • Author: Filippo
    • Posted on: 2012/06/13
    • At: 18:33

    Hi! and thanks for your work. I’m using your script in a jqm/phonegap app for android. I’m trying to create an horizontal timeline with a parallax effect ( two png’s backgrounds one in front of the other). Any suggestion on how do to this? how can i move the lower level background while i scroll? thanks!

    Reply
    • Author: Edmond
    • Posted on: 2012/06/15
    • At: 18:49

    I am testing the demo on opera mini on nokia mobile. Nothing happened on scroll??

    Reply
    • Author: Gary Teh
    • Posted on: 2012/06/18
    • At: 03:17

    Hi, so far iScroll done a great job. But i still faced some minor problems while designing a website for iPad devices.
    - overflow div cannot be scrolled (but i found a solution by using stopPropagation)
    - animate() using jQuery. It won’t work unless i comment out iScroll. Any one got any solutions for it?

    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>