Search code examples
javascriptcssscrollbarmobile-safarimobile-website

Can javascript detect when scrollbars are unavailable (i.e. on mobile browsers)?


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 */
}

Solution

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