views:

99

answers:

1

I've got a javascript-based Scrolling Widget Thingy™. One of the things it does is create a fixed height div and gives it overflow: auto.

Alas on mobile Safari (and other mobile browsers) overflow: auto; doesn't show a scrollbar. Any content below "the fold" can only be found by accident.

Is there a way to detect this in javascript, without resorting to browser detection? e.g.

if (there is a scrollbar) {
    /* give me a fixed height and a scrollbar */
} else {
    /* Do something more suited to this situation */
}
+2  A: 

I can only think of resorting to dirty tricks:

  1. Create 50x50 box
  2. Set box to overflow: auto
  3. Flood box with text
  4. Read box inner size: if 50x50, something went wrong
  5. Store result in variable and destroy box

... given that there's actually a way to measure the inner size, scrollbar excluded.

It's a scary algorithm anyway, hundreds of things can go wrong... Consider it just an idea.

Álvaro G. Vicario
As hacky as it might be, this might just work. clientWidth and clientHeight take scrollbars into account on the desktop. Now I need to do some testing on some mobile devices.
Olly Hodgson
...and it works on iOS 3.2 and 4.0 devices.
Olly Hodgson
So, I created http://thinkdrastic.tumblr.com/post/870842095/ based on this idea. Seems to work. If anyone's got any feedback, please let me know! Thanks again Álvaro.
Olly Hodgson