Web and WebWorks Development

[d_source]

In the app i'm making i have a <div> of a fixed height. User inputs make the list in the div longer and eventually it will go beyond the bottom border. In my CSS i have the overflow set to auto so that when the list is longer than the div the scrollbars will show. This works in all browsers but not on the playbook. The div is userscrollable but i'm afraid that the user won't know to scroll since the bars don't appear. I tried many different options and nothing makes the bars appear on the playbook. Anyone know what the trick is here?

[praveen_rajan]

Even I have the same issue. This is because the default scroll bar is present only for the whole HTML body and not for inner DIVs. Have you tried the iScroll Javascript library which has some cool scrolling effects. May be there are some settings to keep the scrollbars visible using that.

[tneil]

One comment about using a JavaScript toolkit like iScroll or others.... using one of these toolkits will slow down the scrolling of the div since the toolkit animates the scroll using JavaScript and CSS.

The native scrolling of <div>'s and the body content is hardware accelerated and very smooth with inertial effects.

By adding a scrolling JavaScript toolkit you may get scroll bars drawn, but it could drastically reduce your scrolling speed and smoothness.

[praveen_rajan]

Yes I totally agree with that. But is there an alternative way for the issue mentioned?

[tneil]

Unfortunately I don't think there is any way to force the scroll bars to appear on a div unless you draw in some fake ones.

Another thought would be to draw a "down" arrow in the div to indicate there's scrollable content.

[d_source]

Thanks. It's good to know that this isn't possible and that I have to look for an alternate solution. It sucks that you can't force scroll bars to appear however.

My solution is to have a msg pop up when the div goes longer than the lower limit.

[yllus · Accepted solution]

After tneil advised me to ditch iScroll and use the native kinetic scrolling built into WebWorks, I had a related issue to this - I had DIVs with overflow but no visible scrollbar. 

My solution: Adding a custom scrollbar for WebKit browsers as described here:

http://css-tricks.com/9130-custom-scrollbars-in-webkit/

My specific implementation is encapsulated in this GitHub commit:

https://github.com/yllus/Lemma-for-the-BlackBerry-PlayBook/commit/cace1d022a544b8c7a9546d5044d42d489...

[tneil]

Very cool... the webkit CSS styling of scroll bars is news to me

[praveen_rajan]

This is great news, thanks 

[d_source]

Thank you very much! This is excellent and it works! There are so many new and good things that CSS3 has to offer.