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

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

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 let’s 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.

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

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

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