Hiding the scrollbar when it is not moving in CSS

Question

Is it possible to get the state of movement in CSS, without JQuery, and use it for hiding the scrollbar?

you can achieve this by jquery, if mouse position near to scrollbars location then show else hide.... — alamnaryab, Aug 17 '15 at 07:35
Welcome to StackOverflow. Please take some time to visit the [help] . Please let us know what you have tried so far, and where youa re stuck. As it stands, your question will be closed as off-topic. — Burki, Aug 17 '15 at 07:39
`overflow: scroll;` will add a scrollbar only if the screen is small enough — Hearner, Aug 17 '15 at 07:42
Can it be done without jquery? Also, I'm not talking about mouse position, but rather hiding it when it isn't scrolling or moving. — Shadow, Aug 17 '15 at 07:43

score 0 · Answer 1 · edited May 23 '17 at 11:43

This should be achievable trough jQuery

Scrollevent with jQuery: https://api.jquery.com/scroll/

Scrollevent Stop: jQuery scroll() detect when user stops scrolling

Hide Scrollbar: Hiding the scrollbar on an HTML page

In the end, the could may look like this (not tested):

<script>
$( window ).scroll(function() { 
  //Show scrollbar 
  $( "body" ).css( "overflow", "scroll" );

  // Check if we are still scrolling, else hide scrollbar
  clearTimeout($.data(this, 'scrollTimer'));
  $.data(this, 'scrollTimer', setTimeout(function() {
    // Scrollevent not happened, hiding Scrollbar
    $( "body" ).css( "overflow", "hidden" );
  }, 250));

});
</script>

Hiding the scrollbar when it is not moving in CSS

1 Answers1