Scrolling and fixed position on mobile devices for Drupal 6.

Scrolling and fixed position on mobile devices for Drupal 6.

Posted on: Friday, September 23rd 2011 by Erico Nascimento

Over the last of couple weeks we’ve been working on a mobile site/app, with a very standard layout: a location bar fixed on the top, a menu fixed on the bottom and the content being printed in between. I thought this would be a walk in the park until I realized that Safari on the iPhone doesn’t support scrolling inside divs, and “position:fixed” doesn’t really behave like it does on desktops.

Thus began my crusade to find a solution. jQuery mobile was my first option, but quickly discarded because it requires jQuery 1.6 and Drupal 6 still using 1.2.6, proceeded to other solutions that always were either an overkill, or badly documented, so it wasn’t until I thought that all hope was lost that I ran into iScroll a javascript library for mobile webkit that is completely independent of jQuery and built pretty much to solve my problem.

They have modest community supporting the project which is nice and the source files come with a couple different examples that sure help your implementation. We’re just starting the QA process on the app now, but so far it is behaving well minus a few bugs on Android (2.2 & 2.3) and form elements.

Overall I’m looking forward to see how the project is going to grow. They're beta testing version 4.1 and it looks promising.

Have you ever ran into the same issue? Why not share the solution with us?

Have a Happy Theming.
Erico Vinicius.