jQuery Mobile Scrollview

Question

So I\'m trying to make a scrollable list:

Answer 1

I just finished implementing this on android(2.2 and 3.2) and on iphone (not ipad) for scrollview to work properly, you need to include the css file, and the jquery easing script.

Scripts must be included in this order:

1. jquery
2. jquery.mobile
3. jquery.easing
4. jquery.mobile.scrollview
5. scrollview

The css file gives you the scroll bars, jquery.easing gives the smooth animation (an impressive project by itself), jquery.mobile.scrollview does the heavy lifting, scrollview scrapes the page and adds enough markup for the scrollview to take over.

I am sure I don't need to tell you that it's is 'Experimental' for a reason (bizarre behaviour while scrolling through a listview, it also breaks the ability to click on buttons and in text areas on chromium-browser - I haven't tested other browsers), however I have found very few problems with it on mobile devices. I really like that it enables me to keep the tabs at the top of the page all the time. Nesting many scrollviews is pretty cool as well.

I can't say that I have noticed any problems with toggleClass function, however that might have something to do with scrollview going through and adding markup.

NOTE: As of the most recent version of jQuery mobile rc2, the buttons and text inputs should work.

EDIT

As of jQuery Mobile 1.1.0, it is recommended to use the fixed headers using the data-position="fixed" attribute in the header (or footer) and completely remove scrollview.

I have tried this myself and it works much better (for Android 2.2+ and iOS5 - BlackBerry OS not tested by me, but the blog claims it should work for BB7). It runs faster and smoother than the js solution and has fewer graphical bugs. Be sure to remove all the extra js, css and all references to data-scroll as it interferes/breaks everything.

For unsupported versions and OS's you might still need the scrollview js/css etc, but in my experience the places that don't support the fixed headers were too slow to run the js version anyway.