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

2,009 views

Published on

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.
For the full post download this file or visit the full blog post link : http://jbkflex.wordpress.com/2012/04/21/a-look-at-iscroll-native-way-of-scrolling-content-in-mobile-webkit/

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,009
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. A look at iScroll – native way of scrolling content in mobile webkitMobile web kit browsers do not allow you to scroll content inside a fixed size container or a div element. If youare a mobile web developer developing apps for iPhone and Android, you must have faced this problembefore. If you use overflow:auto or overflow:scroll and expect to scroll the overflown content then you wouldrather see your entire web page being scrolled vertically. This happens because it is the default behavior ofDOM touch events to scroll the page.Just to overcome this problem I recently came across a javascript library iScroll which allows native way ofscrolling content inside a fixed width/height element for mobile web kit browsers. So using iScroll you can havea 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 behavesexactly like the native way of scrolling in iPhone apps. iScroll is very easy to use - download the iscrolljavascript library (which is available for download in the home page) and call it in your html page. Then set upyour HTML and CSS and you are good to go. Latest version of iScroll at the time of writing this post wasiScroll4, so you can download the library and use that. iScroll4 also supports a whole lot of other features likepinch-to-zoom, pull-to-refresh e.t.c to make mobile web development easier. I will not go into the details ofiScroll as the site has all the necessary information and is very well documented. I believe you will findeverything 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 Iused iScroll and how it helped me. So lets turn into the example now.Example - Scrolling content inside modal pop up windowIn one of my earlier post I talked about creating a modal pop up window for mobile webkit browsers and alsocame 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 acomputer.One of my readers actually commented on that post asking if it was possible to scroll the content inside thepop up window. Using iScroll I have been able to achieve it. So I hope if he is reading this post he may find outhis solution if not he has already done it.Before moving further lets look at the new demo. Try to scroll the content inside the pop up window, (checkonly 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
  2. 2. To see the code, open the demo link in Google Chrome/Safari and right click to view source. Now, lets look atthe code details very briefly.Code DetailsI will only talk about the changes I made to my previous demo to make scrolling work inside the popupwindow. 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 defaultbehavior 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 toshowPopUpMessage() 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 stringpassed 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.
  3. 3. 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.ConslusioniScroll is a very useful library and it does a great job in replicating the native way of scrolling into mobile webkitbrowsers which otherwise is not possible with normal way of scrolling HTML content inside a fixed dimensioncontainer. The only issue I find is the size of the latest iScroll library file - 33KB, which I feel is a bit more formobile web browsers as they are very limited in resource. The smaller your application files are, the better itis.

×