0

I saw a site recently that had a hidden scrollbar which appear on scroll. This may also be because it's a slickgrid. I'm able to control my scrollbar CSS specific to a div but can't control it from javascript. My script so far has been pretty simplistic:

$('#mydiv').scroll(function(){
    $('#mydiv::-webkit-scrollbar').fadeIn(500);
    //I've also tried .css() above and tried the .hover event as well
})

My div and scrollbar css:

#mydiv{overflow-x: hidden; overflow-y: auto; height: 80%; width: 100%;}
#mydiv::-webkit-scrollbar{display: none;}

Is there a way to show the scrollbar on scroll? I already know how to control on hover by changing overflow on :hover in css.

  • 1
    See: [Lion-like scrollbar with jQuery?](http://stackoverflow.com/questions/6863748/lion-like-scrollbar-with-jquery) (My answer is the accepted one.) – Nathan Nov 22 '14 at 19:46
  • Thanks! I'll take a look and remove if it answers my question –  Nov 22 '14 at 19:47

1 Answers1

1

No plugins needed, try this:

JS:

$(window).bind('mousewheel', function(e) {
  var el = $('body');
  el.css('overflow-y', 'scroll');
  if (el[0].hideScroll) clearTimeout(el[0].hideScroll);
  el[0].hideScroll = setTimeout(function() {
    el.css('overflow-y', 'hidden');
  }, 500);
});

CSS:

body {
  overflow-y: hidden;
}
Gonsalo Sousa
  • 495
  • 4
  • 9
  • hmm this didn't work for me. doesn't give me any errors in console either. –  Nov 22 '14 at 20:22
  • @Zack it appears to be working for me. Check it out on [JSFiddle](http://jsfiddle.net/bhyyhnag/). Make sure you are using jQuery – Gonsalo Sousa Nov 22 '14 at 20:40
  • well, +1 for no plugin. I'm too far into my project to figure out what's wrong with my CSS, it hasn't worked for me but I'll look at it when I have time! –  Nov 22 '14 at 21:04