title: How can I fade in the scrollbar on hover (Webkit only)
body: <p>I have a requirement to fade in scrollbars on hover of an HTML element that is overflowing.  I can easily show and hide the scrollbars by switching between <code>overflow: hidden</code> and <code>overflow: auto</code> on the <code>mouseenter</code> and <code>mouseleave</code> events, however it's very abrupt and I can't think of an elegant way to fade it in.</p>
  
  <p>So far I have:</p>
  
  <pre><code>$(".scrollable").mouseenter(function () {
      $(this).css("overflow", "auto");
  });
  
  $(".scrollable").mouseleave(function () {
      $(this).css("overflow", "hidden");
  });
  </code></pre>
  
  <p>Any ideas if there is a nice way to do this?</p>
  
  <p>PS. I'm only interesting in Webkit browsers where I can add styling to the native scrollbar.</p>