How can I hide a scrollbar smoothly?

Question

I need to hide the body scrollbar smoothly. I have tried overflow:hidden with transition but it does not work. Thanks in Advance

Answer 1

Unfortunately there is no 'Short and simple' solution to do this. A scrollbar is not an element by itself, so you're going to end up having to make it yourself, and adding the hover or click effect on it or a different element. Fortunately there are other StackOverflow users that have done this before and shared this with us so that we can use this in the future and learn from it. The latter being the main reason of course, since that is what SO is mostly for.

See this JSFiddle.

This fiddle imitates the functionality of Facebook's scrollbar that fades out when you are not hovering over it anymore. All you need to do is make it work with a click() event instead of the hover() event.

Answer 2

This will hide scroll smoothly as per your need

jQuery('html,body').stop().animate({scrollTop:900 },500,function(){});

Answer 3

You can use below code to hide scroll bar

This will hide all scrollbars for textareas.

 textarea 
{ 
    overflow:hidden;
}

You can also use the id or class of the textarea to make it only that one

textarea#txt 
{
overflow:hidden;
}

Answer 4

I know I'm a bit late but you helped me out so I might as well try to help back haha.

The selector ::-webkit-scrollbar could be modified to have an opacity of 0 and you could apply overflow: hidden at the same time if you wrote it in jQuery or JS. Like add ::-webkit-scrollbar { opacity: 0; transition: all .25s;} whenever you're trying to.

Got the selector from this article. https://css-tricks.com/custom-scrollbars-in-webkit/