search

Grsmto / simplebar

Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.
http://grsmto.github.io/simplebar/
MIT License
6.07k stars 533 forks source link

show on hover #650

Open ahoyahoy opened 1 year ago

ahoyahoy commented 1 year ago

I am trying to figure out if it is possible to set the behavior of Simplebar as the scrollbar in Visual Studio Code (win), where the scrollbar is visible when the mouse hovers over the content. Currently, if I use 'autohide: true', it disappears after a while, but I need it to disappear only after a mouseout.

keenthemes commented 1 year ago

The same issue with simplebar-react v3.2.4.

sankarkumar23 commented 1 year ago

I am also looking for a solution... like YouTube sidebar behavior. It disappears only after a mouseout.

Geccoka commented 10 months ago

Here is a solution i've found using pure CSS:

.simplebar-wrapper:hover ~ .simplebar-track > .simplebar-scrollbar:before { opacity: 0.5 !important; }

teneon commented 9 months ago

I am also looking for this kind of option. I tried the solution provided by @Geccoka ,it partly works for me, but 10px of what seems to be min-height stays on top. Also when i click and drag scroller, then stop the mouse movement while still hoding left mouse button, scrollerbar disappears again. We need a better solution for this i think.

ahoyahoy commented 9 months ago

I use this native solution https://codepen.io/ahoyahoy/pen/zYbdRPo

teneon commented 9 months ago

@ahoyahoy I have used almost exactly the same CSS solution as you are using, but this scrollbar doesn't go over the content, you have to reserve space (width for the scrollbar), while Simplebar overlays the content, which is amazing, similar to what apple does with their scrollbar.