CODEWITHSUNDEEP
htmlcssscrollbar
user3260950
user3260950

Reputation: 795

Transparent scrollbar with css

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

Upvotes: 66

Views: 228679

Answers (14)

Emilio Cobos Álvarez
Emilio Cobos Álvarez

Reputation: 588

The standard way to do this (which currently works everywhere except Safari) is:

:root {
  scrollbar-color: transparent transparent;
}

Upvotes: 8

Rohan
Rohan

Reputation: 1

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.

Upvotes: 0

Jos Koji
Jos Koji

Reputation: 19

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.

Upvotes: 0

karl-police
karl-police

Reputation: 1055

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.

Upvotes: 66

Alex Zab
Alex Zab

Reputation: 23

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>

Upvotes: 2

user17142525
user17142525

Reputation:

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;

Upvotes: 0

koskokos_231
koskokos_231

Reputation: 49

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!

scrollbar

Upvotes: 1

Shivani
Shivani

Reputation: 63

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

Upvotes: 6

Caesare
Caesare

Reputation: 1

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

Upvotes: 0

vilsbole
vilsbole

Reputation: 1952

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

Upvotes: 0

karthik vishnu kumar
karthik vishnu kumar

Reputation: 1021

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/

Upvotes: 0

Dice
Dice

Reputation: 233

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

Upvotes: 0

Void Spirit
Void Spirit

Reputation: 909

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

Upvotes: 22

4dgaurav
4dgaurav

Reputation: 11496

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

Upvotes: 13

Related Questions