Scrollbars - transparent and invisible until movement for scrollable divs

Question

I utterly hate the inconsistency of scrollbars across browsers. After recently seeing OSX lion in action with its transparent until movement scrollbars I wonder if we can recreate this cross browser.

I looked at a few JQuery plugins. The closest was called tiny scrollbars which was close and after fiddling with the PNG images, nearly close enough, but it was limited in that I could not work out how to show it only while the div is being scrolled and then gently fade it out again. Also if possible I would enjoy a bit of momentum and even elasticity.

Is there a way of doing this?

Answer 1

You can set overflow and toggle accordingly

Something like this might work:

Start with this in your css

body { overflow: hidden; }

Then

$(function(){
  $(document).mousemove(function(e){
    $("body").css("overflow", "auto")
  });
});

Note you might have to specify width and heights to avoid inadvertent clipping when the page renders.