Native Scrollbar Overide

Question

There are currently jQuery plugins that make a system's native scroll bar look like the iOS scroll bar (http://rocha.la/jQuery-slimScroll and others). Example code for these platforms makes it look like they need a fixed height to work.

    $('#example').slimScroll({
        height: '250px'
    });

I want to adopt the new flexbox standard (2012-2013) edition. The height and width of the container can change. Is it possible to overwrite the native scroll bar in a similar manner to jQuery slim scroll? I know webkit has this http://css-tricks.com/custom-scrollbars-in-webkit/, but I want to have support across the modern browsers (as of the time of this post, IE11, FF26, Chrome 31, Safari 7).

Is this possible? Or will I have to overwrite the DOM hacking that jQuery slim scroll seems to do?

Answer 1

Probably not an easy task, my friend. The cross browser solutions are probably replacing the element with a bunch of little divs that look like a scrollbar, and then calculating how much to scroll the content by using the overall height VS the viewable height.