hide scrollbar if not scrolling

Question

I would like to hide the scrollbar if the the user is not scrolling, meaning if the user scrolls, the scrollbar should appear (only the scrollbar not the scroll track), while if the user does not scroll it should disappear. I sort of had that setup for a long time, but than I made some changes to my page and now the page always shows the scrollbar (if there is more content than one page can cover). Unfortunately I don't know what I did to make this feature go away? I played around with overflow in the css, but overflow: hidden just removes all scrolling possibilities. Here is a fiddle which shows my current setup

https://jsfiddle.net/jsmnsLm7/ (please make the window big, so that you can see all of the features of my navbar setup)

as you can see I use

overflow: hidden 

in the body and

overflow: scroll

in the main. thanks for your help carl

Autoclave

hi mguijarr... overflow:auto; just removes the scrollbar if there is no need for a scrollbar and it displays a scrollbar if it is needed... thats not quite what I want. – Autoclave

Something like this might be overkill, but areaaperta.com/nicescroll – Lemieux

Hi Grdaneault, thanks for pointing that out. I sort of hoped that there is a very simple css solution to this since I had that setup before... but if that is not the case I will give the jquery solution you pointed out a try – Autoclave

I dont think there is css solution for this, you definitely need custom plugin like jquery sscrollbar plugins – Falconiform

hm like I sad, I had that working before? Without jquery... – Autoclave

Answer 1

try following css:

overflow:auto;

It worked for me :)

Straightforward

This will just enable scrolling if data overflows the container, but it won't auto-hide the scrollbar when the user is not using it. Mobile browsers will tend to auto hide scrollbars, but this won't work on desktops. – Scopula

Answer 2

This will do what you're looking for http://rocha.la/jQuery-slimScroll

Or you could just show the scrollbar when you hover over the area using CSS only; This worked for me;

<style>
#ID {
  overflow-y: hidden;
}

#ID:hover, #ID:active, #ID:focus {
  overflow-y: auto;
}
</style>

<div class="ID"></div>

Emeric

Answer 3

There isn't a way to do this outside of a scripting languege as far as I know, but the JavaScript you use for this is super simple.

Start off with a CSS style of:

#ID {
overflow: hidden
}

Then in your div in the HTML use this command

<div id="ID" onmouseover="this.style.overflow='scroll'"
onmouseout="this.style.overflow='hidden'"

this will cause your scroll button to appear when the user hovers over the div, but then disappear again when the user hovers away from the div.

Thebault

worth noting that this will make scrolling not work on touch-screen devices – Matriculate

Answer 4

If you are using bootstrap, it is pretty simple - There is a default Scroll class to which you can apply the style overflow: auto.

<div class="Scroll" style="overflow: auto" >
    .......
</div>

Cunningham

Answer 5

use overflow: auto

The overflow property has the following values:

• visible - Default. The overflow is not clipped. The content renders outside the element's box
• hidden - The overflow is clipped, and the rest of the content will be invisible
• scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
• auto - Similar to scroll, but it adds scrollbars only when necessary

Nestle

This doesn't answer the question. This will just enable scrolling if data overflows the container, but it won't auto-hide the scrollbar when the user is not using it. Mobile browsers will tend to auto hide scrollbars when not scrolling, but this won't work on desktops – Scopula

Answer 6

Based on this https://mcmap.net/q/1041523/-hide-scrollbar-if-not-scrolling answer I made this:

.categorias::-webkit-scrollbar-thumb {
    height: 6px;
    background: #ff3d1d;
    border-radius: 10px;
    visibility: hidden;
}

.categorias:active::-webkit-scrollbar-thumb {
    visibility: visible;
}

this worked in my case because my div is draggable, so the thumb shows when i drag and move it, but with JS you probably can make it apear based on events like page scroll for example.

Arboretum

Answer 7

This will make the scrollbar visible when you hover the element.

.myclass{
  overflow: hidden;
}

.myclass:hover{
  overflow: auto;
} 

Banausic