Transparent scrollbar with css

by

Edit:

The solution that I gave with overflow: overlay still works in browsers like Google Chrome and you can still see my answer below. However, overflow: overlay was marked depreciated.

Whether an alternative solution exists, is unknown, but the one mentioned below still works for Google Chrome.
From what I understood from https://github.com/w3c/csswg-drafts, is that the alternative was ment to be scrollbar-gutter. But there’s actually nothing pointing towards an alternative solution, except people saying that there would be.

The documention of scrollbar-gutter says, that the user agent is able to control whether it shows classic or overlay scrollbars. And the people at the csswg-drafts say that the people that would implement such a feature, don’t seem to be interested into it.

If we want an alternative solution, then we have to tell them, here: https://github.com/w3c/csswg-drafts/issues/7716

I can’t suggest this alone, they need more people that would be interested in having a “feature” to let the website author control whether a classic or a overlay scrollbar should be used.

Regarding Google Chrome’s overlay scrollbars. They’ve made an experiment that allows the user to enable it at chrome://flags/ and then searching for “Overlay Scrollbars”.
 

Answer:

If you use this for “body”:

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, apparently 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.

More Related Contents:

  1. How to change scroll bar position with CSS?
  2. Add a horizontal scrollbar to an HTML table
  3. Why does vw include the scrollbar as part of the viewport?
  4. How can I prevent the scrollbar overlaying content in IE10?
  5. Hide html horizontal but not vertical scrollbar
  6. Prevent scroll-bar from adding-up to the Width of page on Chrome
  7. How can I increase a scrollbar’s width using CSS?
  8. Apply Border-Radius To Scrollbars with CSS
  9. with fixed and scrollable [duplicate]
  10. How to get horizontal scroll bar in select box in IE?
  11. How can I create equal width/height boxes that fit the screen width? [duplicate]
  12. Scrollbar without fixed height/Dynamic height with scrollbar
  13. HTML canvas with scrollbar
  14. Equal height columns with CSS
  15. How to replicate background-attachment fixed on iOS [duplicate]
  16. How to make a pure css based dropdown menu?
  17. Remove Select arrow on IE
  18. What replaces cellpadding, cellspacing, valign, and align in HTML5 tables?
  19. How do I justify a horizontal list?
  20. How to strike through obliquely with css
  21. How do I add a margin between bootstrap columns without wrapping [duplicate]
  22. Center a div horizontally and vertically and keep centered when resizing the parent [duplicate]
  23. Bootstrap 3 Glyphicons CDN
  24. How do I reduce the opacity of an element’s background using CSS?
  25. CSS/HTML: What is the correct way to make text italic?
  26. svg background image position is always centered in internet explorer, despite background-position: left center;
  27. CSS Border on PNG image with transparent parts
  28. Make Div Draggable using CSS
  29. Create tree view with horizontal and vertical lines showing the connectivity using css
  30. How can I get a specific number child using CSS?

Leave a Comment