Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Contributor
mikebevz
Posts: 17
Registered: ‎04-19-2012
My Device: Torch
My Carrier: Telenor Denmark

Fixed header + scrolling long list - what is the best practice?

Hi, 
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.

 

body

   - 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

 

body

   - 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. 

  

Please use plain text.
Contributor
DMA2011
Posts: 33
Registered: ‎09-19-2011
My Device: playbook
My Carrier: none

Re: Fixed header + scrolling long list - what is the best practice?

[ Edited ]

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.

Please use plain text.
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha
My Carrier: o2 (de)

Re: Fixed header + scrolling long list - what is the best practice?

Since HTML5 flex boxes (check http://www.html5rocks.com/en/tutorials/flexbox/quick/) became usable, I completely neglected fixed and absolute positioning.

And iScroll 4 (http://cubiq.org/iscroll-4) enables div element scrolling wherever you need it.

 

Both work great on all mobile Webkit browsers.

- - -
My approved apps @ App World
Please use plain text.