Monday, January 10, 2011

Creating scrollable divs on a Mobile device

On mobile devices the scroll property cannot be set for divs on the page since the page itself is scrollable. Google has released a possible workaround that I am trying to get working. It involves disabling the scroll property of the document and animating the div in response to touch events:

http://code.google.com/mobile/articles/webapp_fixed_ui.html

Update: I just found the YUI Scrollview and (after figuring out a critical step to get the scrollbars to work) its awesome!

http://developer.yahoo.com/yui/3/scrollview/

The problem I ran into was how to get the scrollbars to show up. It turns out that the documentation does not include the need to attach a "yui-skin-sam" style to the container that holds the scrollable div. So in order to make it work here is a very simple example:

http://pastie.org/1454114

No comments: