Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

hide scrollbar if not scrolling

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

like image 853
carl Avatar asked Jul 19 '15 20:07

carl


People also ask

How do I hide the scroll bar in inactivity?

There are many ways to hide the scroll bar when the page is inactive. One such way is using the onscroll, onmousewheel, onclick and onmousemove events, which help us to achieve our goal using basic HTML and JavaScript. Approach: The onscroll event is used to disable the scroll bar.

How do you make scrollbar only visible when scrolling?

Add CSS. Set the overflow property to “auto”. This value adds scrollbar when the content overflows. Set the width and height of the <div>.

Why scroll bar is appearing when not needed?

By default, a scroll bar will appear when the content is too long. Page authors can override this in a number of ways, for example: overflow-y: hidden => cut off content that is too long. overflow-y: scroll => always show a scroll bar even when it's not needed.


2 Answers

try following css:

overflow:auto;

It worked for me :)

like image 112
Sandeep Ghosh Avatar answered Oct 04 '22 16:10

Sandeep Ghosh


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;
}
</style>
#ID:hover, #ID:active, #ID:focus {
  overflow-y: auto;
}
</style>

<div class="ID"></div>
like image 44
Dylan Hamilton-Foster Avatar answered Oct 04 '22 15:10

Dylan Hamilton-Foster