Wednesday, May 16, 2012

jQuery Mobile 1.1.0 Fixed Headers Browser Scrolling

I am developing an app that requires fixed headers and footers with the content scrolling in between. I was previously accomplishing this by giving the header and footer position:absolute and using iScroll4 to scroll a fixed height </div>. This works great on Mobile Safari, but I'm experiencing a lot of performance issues on Android Browser (I've tested against 2.2.X and 3.1.X).



I've switched to using JQM's new fixed toolbars implementation in 1.1.0 and while they work great, I now have the problem that the entire browser itself scrolls above and below the content (specifically in Mobile Safari) in an elastic fashion... not sure on the actual name of this behaviour.



Does anyone know how to prevent only the browser window from scrolling / moving while allowing the content within to use the native scroll + JQM fixed toolbars?



Any help would be greatly appreciated; thanks!





No comments:

Post a Comment