Blog Index > Mobile Internet > Scrolling div layers on iOS5

Scrolling div layers on iOS5

A couple of months ago, I wrote about how to create a scrollbar for iPhones and iPads using iScroller - a third party javascript component. The problem with current versions of iPads and iPhones is that if you create a div layer with overflow:auto or overflow:scroll css attributes, there is no visible scroll bar in the browser. This means that people might not know that there is more content which you have to scroll down for, and even if they did, they need to use the esoteric two finger scrolling method. The iscroller javascript version works ok, but can slow your browser down quite a lot. This is why the latest version of jQuery Mobile (v1 Beta 3) does not include their own version of it. This performance hit may be reduced in the latest version of iscroll - 4.3.1 which has an 'uber performance mode'.

iOS5 may change things completely. The beta version of iOS5 supports overflow:auto, that's great news, although you will still need to use some javascript implimentation to create a visual indicator of the scrolling. Also, scrolling acceleration is not supported. So it looks like the iScroll system is not redundant just yet. Having the option of using just one finger for div scrolling is welcomed though.

Another good addition to iOS5 is position:fixed which will allow you to create header and footer div elements, which when used with overflow:auto will mean you can sandwich your content in a scrollable area and have a fixed area at the top or bottom (or both) to have things like home buttons, custom search bar, or content sensitive navigation elements. I suspect there will be a lot of people also using banner adds in the footer area.

 

Categories: Mobile Internet19 September 2011Log in to add new posts



Recommended Sites: