Menu
Now use this code (and many variations of this), but scroll track get dark-grey color, something like #222222 or near this. Find many examples, but all of them give same result. Opera, Chrome and Firefox show this bug. How to fix?
#style-3::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: transparent; } #style-3::-webkit-scrollbar { width: 6px; background-color: transparent; } #style-3::-webkit-scrollbar-thumb { background-color: #000000; } 
676
To hide the scrollbar and disable scrolling, we can use the CSS overflow property. This property determines what to do with content that extends beyond the boundaries of its container. To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element.
If you use this:
body { overflow: overlay; } The scrollbar will then also take transparent backgrounds across the page. This will also put the scrollbar inside the page instead of removing some of the width to put in the scrollbar.
Here is a demo code. I wasn't able to put it inside any of the codepen or jsfiddle, apperantly it took me a while until I figured out, but they don't show the transparency, and I don't know why.
But putting this in a HTML file should go fine.
Was able to put it on fiddle: https://jsfiddle.net/3awLgj5v/
<!DOCTYPE html> <html> <style> html, body { margin: 0; padding: 0; } body { overflow: overlay; } .div1 { background: grey; margin-top: 200px; margin-bottom: 20px; height: 20px; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(90, 90, 90); } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); } </style> <body> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> </body> </html>Best way to test it is to create a local html file, I guess.
You can also apply that on other elements, such as any scrolling box. While using inspector mode, it could be that you have to put the overflow to hidden and then back to anything else. It probably needed to refresh. After that it should be possible working on scrollbar without having to refresh it again. Just note that was for the inspector mode.
73
With pure css it is not possible to make it transparent. You have to use transparent background image like this:
::-webkit-scrollbar-track-piece:start { background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important; } ::-webkit-scrollbar-track-piece:end { background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
