06-19-2012 09:33 AM
I've been working with WebWorks in the last three months and still can't find any good solution for scrolling of long lists.
When I use the structure listed below I get pretty good scrolling, but the entire app is bouncing up/down when I reach the end of the list.
- header -> position: fixed, z-index: 100
- article -> position: absolute, height: XXXpx
- div -> long div with lots of items
To solve this problem I tried to do the following
- header -> position: fixed
- article -> position: absolute, height: XXXpx, overflow: hidden
- div -> overflow:auto
In this case I've got all the app behaving like a native one - it doesn't bounce.
BUT scrolling is terribly slow. It's just disaster.
As a solution the that problem I made a plugin, that tracks touch events on the list and moves it up and down using css-transform: translateY.
It works perfectly, BUT there is another problem with it. I figured out that when I use any kind of css-transform it takes 1-4 seconds for the UI start responding to user actions after application comes back from background.
Guys, how do you solve the problem of fixed top panel and long list. I have read all the comments on the forum, and there is no solution for it yet.
06-19-2012 02:08 PM - edited 06-19-2012 02:15 PM
Not sure whether this will be appropriate for your app, but I have used iscroll http://cubiq.org/iscroll-4 a number of times within apps for the playbook and find it very responsive with long(ish) lists. It is easy to configure a list within a scrolling container, so it may be worth giving it a try if you haven't already.
06-19-2012 02:33 PM
Since HTML5 flex boxes (check http://www.html5rocks.com/en/tutorials/flexbox/qui
And iScroll 4 (http://cubiq.org/iscroll-4) enables div element scrolling wherever you need it.
Both work great on all mobile Webkit browsers.