DWQA QuestionsCategory: Development ToolScrollbar hiding under Chrome is not overflow
luger asked 1 week ago

I want to implement that a div has a scrollbar but wants to move the mouse up when the scrollbar is displayed, move out of the scrollbar to hide. I tried it right: – webkit-scrollbar {display: none} can be implemented, but elements will move. Transparency does not work for scrollbar. Is there any other way? Thank you

3 Answers
Best Answer
kmxz answered 1 week ago

The method is simple: no background color without hover (so you can’t see)
Hover when there are
See I wrote a demo:http://jsfiddle.net/eHLqu/1/
The core idea is

div#container::-webkit-scrollbar {
    background: transparent;
}

div#container:hover::-webkit-scrollbar {
    background: lightyellow;
}

Two new solutions based on LZ’s further description of the problem
http://jsfiddle.net/t6g52/3/This one is tricky, using the same background color to hide

http://jsfiddle.net/vPmg6/1/This one needs JS to implement.

For these two, see the comments below.

kmxz replied 1 week ago

It seems that there is no way out. Of course, I wrote the demo below, but you can see the limitations at a glance. That is to hide it with the same background color.http://jsfiddle.net/t6g52/3/================http://jsfiddle.net/vPmg6/1/It’s a tricky-looking solution that’s actually intuitive.

greatghoul answered 1 week ago

I’ve been using this all the time.https://github.com/inuyaksa/jquery.nicescroll

bmxklyzj answered 1 week ago

On the top floor, Nicescroll is really great. See Github.