A look at iScroll – native way of scrolling content in mobile webkit

Mobile web kit browsers do not allow you to scroll content inside a fixed size container or a div element. If you are a mobile web developer developing apps for iPhone and Android, you must have faced this problem before. If you use overflow:auto or overflow:scroll and expect to scroll the overflown content then you would rather see your entire web page being scrolled vertically. This happens because it is the default behavior of DOM touch events to scroll the page.

Just to overcome this problem I recently came across a javascript library iScroll which allows native way of scrolling content inside a fixed width/height element for mobile web kit browsers. So using iScroll you can have a fixed header/footer with position:absolute and a scrolling central content area.

iScroll uses hardware accelerated CSS3 transitions and transformations to scroll the content and it behaves exactly like the native way of scrolling in iPhone apps. iScroll is very easy to use – download the iscroll javascript library (which is available for download in the home page) and call it in your html page. Then set up your HTML and CSS and you are good to go. Latest version of iScroll at the time of writing this post was iScroll4, so you can download the library and use that. iScroll4 also supports a whole lot of other features like pinch-to-zoom, pull-to-refresh e.t.c to make mobile web development easier. I will not go into the details of iScroll as the site has all the necessary information and is very well documented. I believe you will find everything there to get you started in 5 mins.

But then why did I write this post? I did so primarily with an intention of sharing one of my examples where I used iScroll and how it helped me. So let’s turn into the example now.

Example – Scrolling content inside modal pop up window
In one of my earlier post I talked about creating a modal pop up window for mobile webkit browsers and also came up with an example. Here is the link to the example once again: http://jbk404.site50.net/css3/modalwindow/ . Check it in an iPhone/Android browser or Chrome/Safari in a computer.

One of my readers actually commented on that post asking if it was possible to scroll the content inside the pop up window. Using iScroll I have been able to achieve it. So I hope if he is reading this post he may find out his solution if not he has already done it.

Before moving further let’s look at the new demo. Try to scroll the content inside the pop up window, (check only in webkit browsers)

Scrolling Content Demo: http://jbk404.site50.net/css3/scrollingmodalwindow/

Below is a screenshot from my iPod, you can see the scroll bar appearing inside the popup window

Scrolling content inside popup window

To see the code, open the demo link in Google Chrome/Safari and right click to view source. Now, let’s look at the code details very briefly.

Code Details
I will only talk about the changes I made to my previous demo to make scrolling work inside the popup window. The rest of the code is pretty simple. You can refer my previous tutorial for that.

Script Changes – All the changes can be found inside the script.js file. First I made sure that the default behavior of touch events scrolling the entire page is prevented,

document.addEventListener('touchmove',preventDefaultScrolling,false);
function preventDefaultScrolling(event)
{
  event.preventDefault(); //this stops the page from scrolling.
}

Then I created the HTML structure needed by iScroll. For this I passed the HTML as a string to showPopUpMessage() function, this string is then added to the modal window using innerHTML property,

showPopUpMessage("<div id='modalWindowContentWrapper'><div id='scroller'>" + content + "<div></div>");

You can see more about the necessary HTML block for iScroll in its site. Coming back to my code, the string passed is then added as shown below,

function showPopUpMessage(msg) {
  modalWindowElement.innerHTML = msg;   
}

Now that the elements are added to the DOM, I create the iScroll object inside the showPopUpMessage() function,

myScroll = new iScroll('modalWindowContentWrapper');

The iScroll constructor takes two arguments, you can check all the details in their site. This is it for the script.

Now lets see the CSS changes,

I just added the two blocks shown below as recommended by the iScroll,

#modalWindowContentWrapper
{
  overflow:auto;
  width:100%;
  height:100%;
  position:relative;
}
#scroller {
  position:absolute;
  /*    -webkit-touch-callout:none;*/
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  width:98%;
  padding:0;
}

For the HTML part, I just added the iScroll script file and my custom script file,

<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/script.js"></script>

This is it, only a few changes and I was able to make the content scroll inside the pop up window.

Conslusion
iScroll is a very useful library and it does a great job in replicating the native way of scrolling into mobile webkit browsers which otherwise is not possible with normal way of scrolling HTML content inside a fixed dimension container. The only issue I find is the size of the latest iScroll library file – 33KB, which I feel is a bit more for mobile web browsers as they are very limited in resource. The smaller your application files are, the better it is.

About these ads

55 thoughts on “A look at iScroll – native way of scrolling content in mobile webkit

  1. Pingback: Cool modal Popup window with fade effect for mobile web – CSS3 and JavaScript « Joseph's RIA Lab

  2. iScroll is cool but it breaks the “Video” tag, (hardware acceleration settings) and the video stops working. I couldn’t figure out the reason.
    Ash

    • Ashutosh……
      Let me give it a try and then I will let you know……
      But anyways the scrolling is made by CSS3 transitions and transformations……so whichever element is being transformed the child of that element will also move……may be video has some issues or so……not sure as of now……will find and let you know.
      Thanks.

    • Ashutosh….
      I found no issues with the video tag with iScroll……I could scroll the pop up with a HTML5 video inside it in desktop and mobile webkit browsers. Even for iPhone and iPod mobile safari browser it was working……I used .mp4 and .ogg video formats for my test. If you checked your thing in iphone then anyways it doesnot play the video inline……..instead the device player opens and shows the video. One issue I found is that if you try to swipe your finger over the video then the whole page starts to scroll, for that you can give some padding on the right of the modal window so that the scroller doesnot overlap with the video. Other than that it worked fine….
      Let me know if you have anything…
      Thanks.
      Joseph

  3. Hi joseph, A very fruitful post that i searching for. I have a problem in implementing this. I’m already using this iscroll thing. It’s working as expected when i tested the page seperately. But I need to load the page into another. So i loaded the page from the main page using innerHtml.(Since i should not use iframes). The problem starts from here. When i tested this framework in Xoom, the particular Div for which i have scroll is going off the track. (misalignment of Div)

    I could not find the solution over a week. Can you please advice if you had come over or have a look at this?.

    Many thanks in advance.

    Azar

      • I have a wrapper page called index.html. Here i have the div called ‘container’.

        By using that container, doc.getElemntbyID(‘container’).innerHtml= I’m loading the page (which is having iscroll for a div).

        Now the div is going off the track. But when i tested the page without any wrapper, It’s working fine. That’s my weird issue.

        The problem is not with the iscroll. Even when i have the page without the iscroll also shows the off track content issue.

  4. Yes Joseph. I tried both positions. Still the issue persists. The problem is only with Android(when loading the page by wrapper page). IPad gives the better performance.
    Is there any reason for this?

  5. Yes i tried. The problem occurs only when i give “overflow:auto” to the scrollable Div. If i remove this style from my DIV , the offtrack issue is not happening. But i need to have overflow for more content..

  6. The structure is like this,

    Doc.getElmntbyId(‘Container’).innerHtml=scrollPage.html;

    Will it cause any issues in Android devices?

    Because the scrollPage.html alone seems to work perfect. Whenever load it into any other page , This issue is occuring.

    • Normally it is not a good way of writing the code. scrollPage is some object or some id?? What is that? How can you access some other page and call its html.

  7. Hi Joseph,

    I am using ‘jQuery BlockUI Plugin’ for pop-up. it hase scroll isssues when I view the site in iPhone. How can I use iscroll with ‘jQuery BlockUI Plugin’ ? is it possible? can you guide me?

    regards

    • I am referring to a demo for Block UI here: http://jquery.malsup.com/block/#dialog

      If you see the HTML structure at the bottom of the page, you can insert your iScroll contents there, like this

      After that you can follow my tutorial or see the example. Remember to put css styles (see the tutorial) to the two new div that I have inserted.
      Hope this helps.

      Thanks.
      Joseph

    • What do you mean by native controls?? The pop up will be in a browser right?
      I have sent you an email with the new comment. Somehow, I am not able to post HTML code in the comment.
      Check your mail. In case you did not let me know.

  8. Hi Joseph,

    thanks for mail and quick help.
    when i put any video control on the page, the pop up displayed over that video can not work properly. video has higher priority for touch so i can not scroll nicely in pop up box.

    regards

    • There is nothing like that. The pop up that I created is added to the top of the DOM tree. So all elements will come below it or rather behind it.
      Let me look into your problem when I will get some time out, after that I will come back to you.
      Thanks.
      Joseph

    • Jaydev,

      I still did not get a chance to have a look at it. I was extremely occupied by some other tasks. Did you find a solution to it or at least something.

      Thanks.
      Joseph

  9. Anbu,

    I have a problem to designing a fixed header and footer using iscroll. The last content cannot be displayed. In my wrapper style i add bottom -60px. that time i face that problem

  10. I post replys on goldrefiningform.com
    I can only write to bottom of window then I can’t see below to edit or place cursor
    Just like this window
    Is there anyway for me to get the sub or
    Post window to scroll below bottom
    maybe a key combo for android. Huawei. 4g
    To go to the end or an arrow key. Thanks

      • Hum I thought I was
        Ok pick up an android phone
        And type whatever u like IN THIS POSTING WINDOW. Now when the cursor is past the bottom of THIS WINDOW go back to HERE then try to go back to where u were below the bottom of this window.

        this is below. The window I would not be able to see or fix after I touch the screen

  11. Hi joseph,
    we are using iscroll for phonegap mobile application. we are facing issues in that.
    The scrollable content is loaded dynamically. It works but when we scroll up and come to the end of scroll and again if scrollable content is loaded with new data. Then it is at the end of the scroll content. It is not in the top position.

  12. Thanks very much for this Joseph it is very useful. I have one question though. My HTML page that launches the pop up has a lot of content that goes beyond the ‘fold’ of the ipad screen, however I cannot scroll this, the page is fixed. The modal pop up works great, and that content scrolls perfectly. Can you tell me if it is possible to have my main page content scroll as well as using the iscroll script for my modal popups? thanks very much.

    Darren

  13. Hello Joseph,

    I’ve been struggling for a couple of days, trying to figure out how to make the initial page stop scrolling when I load a div with content and scroll that div. I tried iScroll, didn’t work, gave up and tried regular CSS (fix position with scrollTop value to keep the initial page at the right place). Couldn’t get that to work either. I’m trying to use the smallest libraries possible, for mobile, using Zepto.js right now so many scroll plugins don’t work because they require jQuery. Can you please help me out? I’m back to iScroll. This is the website where I’m testing my code (also testing on mobile): http://www.basket.yankeesmarket.com/index.html. All the content is loaded from the server.

    The articles are in russian but if you could scroll, click on an article and scroll all the way to the bottom of that article, you will see that in the background it’s scrolling the page also. I want to prevent that. I tried implementing your example here but couldn’t get it to work properly. Can you suggest anything?

    • ps…I also made a test page using your code and I extended the length and content of the text to check if the page scrolls on mobile once the modal box is opened. Testing on mobile, since you prevented default scrolling right away, I can’t even get to the button to open the modal box. Adding preventDefault right after the button is clicked disables all scrolling (the modal box does not scroll). Here’s the page: http://www.basket.yankeesmarket.com/test.html

      Please help me out here…I’m really stuck!

  14. Thanks for taking time to help me out.

    One simple way I found that works is to add another div to the main content. So what I had was:

    //all the content here

    I added another div to cover the wrapper div and not the “sliding in content”. Now the wrapper div scrolls, not the entire body itself. BUT….on the iPhone the scrolling is really slow. On Android it’s more or less ok. I still want to figure out a way to use iScroll with dynamically loaded content so if you could look over my first link and see what I’m doing wrong…maybe it’s not possible to do what I’m doing with iscroll-lite? Thanks again,

    Denis

  15. Hi Joseph,

    After several days of staring at that simple code and reading everything I could, I finally got it to work. I was trying to get multiple iScrolls going on one page and I got it to work. The mistake I was making is encompassing the content with another div and setting my iScroll variable to the parent div. When I just had the body and one div, it was scrolling the entire body, I guess. Now I’m sliding in some content on my page, destroying the first iScroll variable and setting a new one so the new content can be scrolled. Then when I click back to the main content, I’m destroying the second variable and initializing the first all over again. Also I’m using preventDefault, that stops the native scrolling and I basically toggle, I’m in control of what I want to scroll. So the main content stays at the original position, doesn’t scroll to the top. Anyway, maybe this will help someone, my explanation in plain English, just how I understand it! Thanks,
    Denis

    • Hi Denis,
      Apologies. I was on vacation and could not look into it.
      It’s great to hear that it is working. And thanks for sharing your findings. Appreciate it!!
      Regards

  16. hai,,
    please help me as soon as possible.for me i scroll is working perfectly in modal(pop-up) but the problem is input is not working in dynamic modal

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s