Transparent scrollbar with css

Question

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;
}

karl-police · Answer 1 · 2023-06-13T14:52:01.920

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 client 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.

The `overlay` value is now deprecated. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Values — Simon Baumgardt-Wellander, Feb 06 '20 at 20:17
Ouch. I was so happy seeing this solution work and then verified @SimonBaumgardt-Wellander's comment that `overlay` is, in fact, deprecated. "Behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers." The lack of browser support might have been why you two, @MaciejBledkowski and @nick-retallack, couldn't see it working — digiwand, Apr 15 '21 at 19:34
Ok, but what is the alternative? Everybody promptly points out that `overlay` is deprecated, but nobody knows what is the alternative to that. If there is none, why is it being depricated? — arunwithasmile, Aug 23 '22 at 11:34
@arunwithasmile from what I understood, there is no clear alternative yet, except for the user agent. So, they say that the user can go to the browser settings and enable overlay scrollbars and that the author shouldn't be able to enforce it. But I don't like the fact that the author can't enforce it. — karl-police, Sep 08 '22 at 21:23

score 20 · Answer 2 · edited Feb 02 '16 at 15:11

20

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;
}

edited Feb 02 '16 at 15:11

torrential coding

1,755
2
24
34

answered Nov 13 '15 at 05:37

Void Spirit

879
6
18

9

This is the first accurate statement regarding background colors on tracks. So many examples of people assuming it works without actually testing it. Thanks! – sinrise May 05 '16 at 17:54
This didn't work when I tried creating a 4x4 px transparent PNG and using that – binaryfunt Sep 11 '18 at 22:06
@binaryfunt can't remember exactly but it was working fine that time. Try other dimensions – Void Spirit Sep 14 '18 at 17:42
the approach using transparent png does not work with FireFox – Terry Jan 03 '20 at 02:18
@Terry of course it doesn't work in firefox. This is webkit only styling, and firefox is not a webkit based browser – tel Jun 09 '20 at 21:09

score 13 · Answer 3 · answered Apr 21 '14 at 15:50

13

    .scrollable-content {
      overflow-x:hidden;
      overflow-y:scroll; // manage scrollbar content overflow settings
    }
    .scrollable-content::-webkit-scrollbar {
      width:30px; // manage scrollbar width here
    }
    .scrollable-content::-webkit-scrollbar * {
      background:transparent; // manage scrollbar background color here
    }
    .scrollable-content::-webkit-scrollbar-thumb {
      background:rgba(255,0,0,0.1) !important; // manage scrollbar thumb background color here
    }

answered Apr 21 '14 at 15:50

4dgaurav

11,360
4
32
59

1

Now - just default scrollbar. – user3260950 Apr 21 '14 at 15:55
1

okies.., I got it, you need to have a fixed height element in your page look at this fiddle for demo http://jsfiddle.net/4dgaurav/F9p7S/64/ – 4dgaurav Apr 21 '14 at 15:58
Yeah, i know about this template, but cant find mistake in my first section. Any ideas? – user3260950 Apr 21 '14 at 16:10
" #style-3::-webkit-scrollbar * { " don't forget use universal selector – 4dgaurav Apr 21 '14 at 16:12
Try to add, again default bar, without * - custom, but no transparent. – user3260950 Apr 21 '14 at 16:18
Too many libraries and html text, but not sure, that fiddle can help with it – user3260950 Apr 21 '14 at 16:22
2

I've seen this over and over again. Background color does not work on scrollbar track or track piece (I'm pretty sure the other elements, too). The scrollbar track seems to get it's color from the body tag. – sinrise May 05 '16 at 17:54
i just made a fiddle with the original code, and the body has a class of "scrollable-content" - https://jsfiddle.net/8b4etky5/ – MineCMD May 07 '16 at 15:08
@MineCMD Try to add: p{ background: red; } – Rocío García Luque Jan 30 '17 at 18:14
works like a charm on chrome. Not working for Firefox – Mbotet Dec 01 '22 at 11:18

score 5 · Answer 4 · answered Jun 16 '20 at 07:14

5

Embed this code in your css.

::-webkit-scrollbar {
    width: 0px;
}

/* Track */

::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
}

/* Handle */

::-webkit-scrollbar-thumb {
    background: white;
    -webkit-box-shadow: none;
}

::-webkit-scrollbar-thumb:window-inactive {
    background: none;
}

answered Jun 16 '20 at 07:14

Shivani

57
1
9

while this might answer the question..please add an explanation of the code – Arghya Sadhu Jun 16 '20 at 08:50
1

What am I missing here - a scrollbar width 0 to make it transparent? – Simon_Weaver Jul 20 '20 at 02:37
1

Confirmed this works for my purposes. Thanks. MDN docs for those interested: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar – OXiGEN Sep 30 '20 at 05:38

score 5 · Answer 5 · edited Apr 17 '21 at 02:34

5

The standard way to do this (which currently only works in Firefox) is:

:root {
  scrollbar-color: transparent transparent;
}

edited Apr 17 '21 at 02:34

Pier-Luc Gendreau

13,553
4
58
69

answered Mar 09 '21 at 21:50

Emilio Cobos Álvarez

528
5
8

Alex Zab · Answer 6 · 2022-09-09T19:34:33.603

2

Only this code worked for me tho -

<!DOCTYPE html>
<html>
<style>
    body {
       overflow: overlay;
    }

    ::-webkit-scrollbar {
       width: 10px;
       background: transparent;
    }

    ::-webkit-scrollbar-thumb {
       background: white;
       border-radius: 2px;
    }
</style>
  
<body>

  ..Your code here

</body>
</html>

edited Sep 09 '22 at 19:34

answered Sep 04 '22 at 17:19

Alex Zab

23
3

score 0 · Answer 7 · edited Jun 04 '19 at 13:01

0

Try this one, it works fine for me.

In CSS:

::-webkit-scrollbar
{
    width: 0px;
}
::-webkit-scrollbar-track-piece
{
    background-color: transparent;
    -webkit-border-radius: 6px;
}

and here is the working demo: https://jsfiddle.net/qpvnecz5/

edited Jun 04 '19 at 13:01

Fcmam5

4,888
1
16
33

answered Oct 18 '15 at 18:21

karthik vishnu kumar

981
9
16

14

The background color is not being applied. The reason it's "invisible" is because of the width. I know this because I have tried setting the background color to transparent and it does not work, plus you misspelled 'color' in your fiddle. :D – sinrise May 05 '16 at 17:51

score 0 · Answer 8 · edited Jun 04 '19 at 14:20

0

To control the background-color of the scrollbar, you need to target the primary element, instead of -track.

::-webkit-scrollbar {
    background-color: blue;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

I haven't succeeded in rendering it transparent, but I did manage to set its color.

Since this is limited to webkit, it is still preferable to use JS with a polyfill: CSS customized scroll bar in div

edited Jun 04 '19 at 14:20

John

185
2
14

answered Nov 29 '16 at 12:18

vilsbole

1,922
1
18
22

3

This doesn't answer the question – ki9 Mar 03 '20 at 19:46

score 0 · Answer 9 · edited May 24 '19 at 12:00

Just set display:none; as an attribute in your stylesheet ;)
It's way better than loading pictures for nothing.

body::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

body::-webkit-scrollbar-button:start:decrement,
body::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
  background-color: transparent;
}

body::-webkit-scrollbar-track-piece {
  background-color: #ffffff;
  opacity: 0.2;

  /* Here */
  display: none;

  -webkit-border-radius: 0;
  -webkit-border-bottom-right-radius: 14px;
  -webkit-border-bottom-left-radius: 14px;
}

body::-webkit-scrollbar-thumb:vertical {
  height: 50px;
  background-color: #333333;
  -webkit-border-radius: 8px;
}

This does not work. In chrome, it leaves a white background. Please test your answers before you post. — Furkan Toprak, Jun 03 '20 at 14:37

score 0 · Answer 10 · answered Oct 11 '19 at 22:53

0

if you don't have any content with 100% width, you can set the background color of the track to the same color of the body's background

answered Oct 11 '19 at 22:53

Caesare

1

score 0 · Answer 11 · edited Aug 02 '21 at 19:39

It might be too late, but still. For those who have not been helped by any method I suggest making custom scrollbar bar in pure javascript.

For a start, disable the standard scrollbar in style.css

::-webkit-scrollbar{
    width: 0;
}

Now let's create the scrollbar container and the scrollbar itself

<!DOCTYPE HTML>
<html lang="ru">
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    
 ...meta
</head>

<body id="body">

<div class="custom_scroll">
    <div id="scroll_block" class="scroll_block"></div>
</div>

...content
<script src="main.js"></script>
<script>customScroll();</script>
</body>
</html>

at the same time, we will connect the customScroll() function, and create it in the file main.js

 function customScroll() {
    let scrollBlock = document.getElementById("scroll_block");
    let body = document.getElementById("body");
    let screenSize = screen.height - scrollBlock.offsetHeight;
    document.addEventListener("scroll", () => {
        scrollBlock.style.top = (window.pageYOffset / body.offsetHeight * (screenSize + (screenSize * (body.offsetHeight - (body.offsetHeight - screen.height)) / (body.offsetHeight - screen.height)) )) + "px";
    });
    setScroll(scrollBlock, body);
}

function setScroll(scrollBlock, body) {
    let newPos = 0, lastPos = 0;
        scrollBlock.onmousedown = onScrollSet;
        scrollBlock.onselectstart = () => {return false;};

    function onScrollSet(e) {
        e = e || window.event;
        lastPos = e.clientY;
        document.onmouseup = stopScroll;
        document.onmousemove = moveScroll;
        return false;
    }

    function moveScroll(e) {
        e = e || window.event;
        newPos = lastPos - e.clientY;
        lastPos = e.clientY;
        if(scrollBlock.offsetTop - newPos >= 0 && scrollBlock.offsetTop - newPos <= Math.ceil(screen.height - scrollBlock.offsetHeight)) {
            window.scrollBy(0, -newPos / screen.height *  body.offsetHeight);
        }
    }

    function stopScroll() {
        document.onmouseup = null;
        document.onmousemove = null;
    }
}

adding styles for the scrollbar

.custom_scroll{
    width: 0.5vw;
    height: 100%;
    position: fixed;
    right: 0;
    z-index: 100;
}

.scroll_block{
    width: 0.5vw;
    height: 20vh;
    background-color: #ffffff;
    z-index: 101;
    position: absolute;
    border-radius: 4px;
}

Done!

Your JS code is incomplete. There is a lot of undeclared variables such as "screenHeight" or documentSite. — Cedervall, Jun 21 '21 at 09:33

score 0 · Answer 12 · answered Mar 01 '22 at 22:27

I was able to get a transparent background, and transparent scroll bar like this:

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar {
  width: 12px;
  background-color: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(33, 37, 41, 0.45); // change 0.45 to 0 to make it invisible
}

Also you can add this to your body element, to display your scroll bar above the website content:

overflow: overlay;

score 0 · Answer 13 · answered Jun 20 '23 at 20:38

As far as I can tell the priority for the scrollbar background color is (on webkit browsers):

Scrollbar-track > Scrollbar > HTML > body

HTML {
  background: red; <- Third Priority
}

body {
  background: blue; <- Fourth Priority
}

::-webkit-scrollbar {
  appearance: none;
  background: green; <- Second Priority
}

::-webkit-scrollbar-track {
  background: purple; <- First Priority
}

To make the scrollbar track transparent you have to set it to transparent/omit the color on scrollbar and scrollbar-track. Then set your background color on the body or the HTML.

The issue is if you want to use something other than a solid color. The scrollbar for the main page doesn't accept any background-images, only colors. Regardless of where it is placed.

A work around I found for this is to instead wrap everything inside the body in a div, as the scrollbars on elements can take background-images. Then set a fixed height to the div and set overflow-y: auto; or overflow-y: scroll; on it.

Here's a fiddle illustrating it.

Transparent scrollbar with css

13 Answers13

Answer:

Linked