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 · Accepted Answer · 2023-06-13 14:52:01Z

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. developer.mozilla.org/en-US/docs/Web/CSS/overflow#Values — Simon Baumgardt-Wellander, Commented Feb 6, 2020 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, Commented Apr 15, 2021 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, Commented Aug 23, 2022 at 11:34

torrential coding · Accepted Answer · 2016-02-02 15:11:07Z

21

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 2, 2016 at 15:11

torrential coding

1,7652 gold badges24 silver badges34 bronze badges

answered Nov 13, 2015 at 5:37

Void Spirit

8991 gold badge6 silver badges19 bronze badges

10

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
Commented May 5, 2016 at 17:54
This didn't work when I tried creating a 4x4 px transparent PNG and using that
– binaryfunt
Commented Sep 11, 2018 at 22:06
@binaryfunt can't remember exactly but it was working fine that time. Try other dimensions
– Void Spirit
Commented Sep 14, 2018 at 17:42
the approach using transparent png does not work with FireFox
– Terry
Commented Jan 3, 2020 at 2:18
@Terry of course it doesn't work in firefox. This is webkit only styling, and firefox is not a webkit based browser
– tel
Commented Jun 9, 2020 at 21:09

Add a comment |

4dgaurav · Accepted Answer · 2014-04-21 15:50:08Z

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, 2014 at 15:50

4dgaurav

11.4k4 gold badges33 silver badges59 bronze badges

2

Now - just default scrollbar.
– user3260950
Commented Apr 21, 2014 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 jsfiddle.net/4dgaurav/F9p7S/64
– 4dgaurav
Commented Apr 21, 2014 at 15:58
Yeah, i know about this template, but cant find mistake in my first section. Any ideas?
– user3260950
Commented Apr 21, 2014 at 16:10
" #style-3::-webkit-scrollbar * { " don't forget use universal selector
– 4dgaurav
Commented Apr 21, 2014 at 16:12
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
Commented May 5, 2016 at 17:54

| Show 5 more comments

Shivani · Accepted Answer · 2020-06-16 07:14:22Z

6

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, 2020 at 7:14

Shivani

631 silver badge10 bronze badges

while this might answer the question..please add an explanation of the code
– Arghya Sadhu
Commented Jun 16, 2020 at 8:50
1

What am I missing here - a scrollbar width 0 to make it transparent?
– Simon_Weaver
Commented Jul 20, 2020 at 2:37
1

Confirmed this works for my purposes. Thanks. MDN docs for those interested: developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
– OXiGEN
Commented Sep 30, 2020 at 5:38

Add a comment |

Pier-Luc Gendreau · Accepted Answer · 2021-04-17 02:34:59Z

6

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

:root {
  scrollbar-color: transparent transparent;
}

edited Apr 17, 2021 at 2:34

Pier-Luc Gendreau

13.7k4 gold badges61 silver badges70 bronze badges

answered Mar 9, 2021 at 21:50

Emilio Cobos Álvarez

5586 silver badges8 bronze badges

Add a comment |

Alex Zab · Accepted Answer · 2022-09-09 19:34:33Z

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 9, 2022 at 19:34

answered Sep 4, 2022 at 17:19

Alex Zab

233 bronze badges

Add a comment |

John · Accepted Answer · 2019-05-24 12:00:48Z

0

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

edited May 24, 2019 at 12:00

John

3254 silver badges14 bronze badges

answered Aug 3, 2018 at 11:59

Dice

2351 silver badge8 bronze badges

4

This does not work. In chrome, it leaves a white background. Please test your answers before you post.
– Furkan Toprak
Commented Jun 3, 2020 at 14:37

Add a comment |

Fcmam5 · Accepted Answer · 2019-06-04 13:01:11Z

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 4, 2019 at 13:01

Fcmam5

6,1971 gold badge21 silver badges39 bronze badges

answered Oct 18, 2015 at 18:21

karthik vishnu kumar

1,00110 silver badges17 bronze badges

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
Commented May 5, 2016 at 17:51

Add a comment |

John · Accepted Answer · 2019-06-04 14:20:11Z

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 4, 2019 at 14:20

John

3254 silver badges14 bronze badges

answered Nov 29, 2016 at 12:18

vilsbole

1,9321 gold badge18 silver badges22 bronze badges

3

This doesn't answer the question
– ki9
Commented Mar 3, 2020 at 19:46

Add a comment |

Caesare · Accepted Answer · 2019-10-11 22:53:06Z

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, 2019 at 22:53

Caesare

1

Add a comment |

Erfan Paslar · Accepted Answer · 2021-08-02 19:39:58Z

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, Commented Jun 21, 2021 at 9:33

user17142525user17142525 · Accepted Answer · 2022-03-01 22:27:17Z

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;

Jos Koji · Accepted Answer · 2023-06-20 20:38:29Z

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.

Rohan · Accepted Answer · 2024-07-19 00:54:02Z

A great website that has done this correctly is ddd.live. (The developers / studio of that site din't use GPU accelerated ThreeJS so it will crank up your cpu, and slow down your other tabs)

Unfortunately there is no way to truly create a real custom scrollbar with minimal gutter/ scrollbar track transparency, using standardized / native scrollbar css rules.

The current state of the art is 100% custom "scrollbar" using div elements and css to create and position the "scrollbar".

For example ddd.live calls that div layer "scroll-indicator-bar" but all movement is done via js.

They don't use any modern front end frameworks so you follow that approach them with a whole lot of direct Dom access.

I would never recommend this method. Simply create a react component which is essential just a "html with js" (a large over simplification but a true statement). Within your custom scrollbar component listen for an onScroll event and in that scroll event is a plethora of information relating to position.

From that event you can control the div layer from within your react component.

ddd.live have done a great job in styling but don't have scroll functionality built into their custom scrollbar. All this can add be done when building the scrollbar component using React or any modern front end framework you are using.

Older methods may have worked in the past but moving forward OSs and browsers cater less to customizability and more to end user standardized usability and this won't change.

But keep in mind you will have to turn off scrollbar display when doing so.

For webkit browsers this is.

::-webkit-scrollbar {
  display: none !important; 
  width: none !important;
}

add this to the main or global css file.

Collectives™ on Stack Overflow

Transparent scrollbar with css

14 Answers 14

Answer:

Not the answer you're looking for? Browse other questions tagged
html
css
scrollbar
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

Answer:

Not the answer you're looking for? Browse other questions tagged htmlcssscrollbar or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
html
css
scrollbar
or ask your own question.