Unfortunately my approach has a drawback of loosing jQuery Mobile out-of-the-box content scrolling. A workaround I found for this is to use absolute positioning and native css declarable scrolling. By native css declarable scrolling I understand using
overflow property with
scroll value and
-webkit-overflow-scrolling set to
touch. You have to be careful when using these, as it may not work on all devices. I know iOS supports it from version 5 and above. In case of Android only
overflow: scroll is actually working, which means you will not have rubber band effect, but your content will actually scroll – which in case of Android is often good enough 😉 For devices that don’t support it you may want to use Overthrow library which nicely polyfills it, or any other libs like: iScroll, Scrollability or ScrollView.
The snippet below demonstrates it in details, you can also run it from here. As you can see I had to absolutely position
content elements. In addition I added
.scrollable css class that enables native scrolling of its content. One thing to note here is that I had to enforce hardware acceleration of scrolled elements with
-webkit-transform: translateZ(0px); property. This only works on iOS so make sure you don’t use this declaration on Android. BTW Apple has fixed it in iOS 6 and enforcing hardware acceleration will not be necessary in the future.