• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS CSS code for styling scrollbar is not working

Kaworu

Coder
Hi :)

I have tried for the first time ever to change the scrollbar to my liking. Sadly, it is not working. The shape, color etc. of the scrollbar is the same as always, just like if I haven't written the CSS code.

I am using Chrome.

HTML:
<!DOCTYPE html>
<html lang="en">
   
    <head>
   
        <meta charset="UTF-8">
       
        <title>My Scrollbar</title>
       
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
        <link rel="stylesheet" href="style.css">
   
    </head>

    <body>
       
        <div class="big-space">
            <p>AAAAAAAA</p>
            <p>AAAAAAAA</p>
            <p>AAAAAAAA</p>
        </div>

        <div class="big-space">
            <p>AAAAAAAA</p>
            <p>AAAAAAAA</p>
            <p>AAAAAAAA</p>
        </div>
       
        <div class="big-space">
            <p>AAAAAAAA</p>
            <p>AAAAAAAA</p>
            <p>AAAAAAAA</p>
        </div>
    </body>

</html>


CSS:
:root
{
    /* background color */
    --bcolor: #F1F1E6;
    /* front color */
    --fcolor: #3D486B;
    /* th (table header) color */
    --thcolor: #C5CEC2;
}

body
{
    background-color: var(--bcolor);
    color: var(--fcolor);
    margin: 0;
    padding: 0;
    font-size: 20px;
}

p
{
    font-weight: bold;
}

.big-space
{
    height: 100vh;
}

/*
 *******************************************
 * !!! SCROLLBAR BELOW !!!
 ******************************************* 
 *  */

*::-webkit-scrollbar-thumb
{
    background-color: var(--fcolor);
    border-radius: 10px;
}

*::-webkit-scrollbar-track
{
    background-color: var(--bcolor);
}
 
Last edited by a moderator:

HadASpook

King Coder
Hello, @Kaworu.

First of all, we can't really do much if you don't share your code with us. Please do that first, then we can help; without the code, we cannot track down the error.

Second of all, are you trying to change the scrollbar in a webpage or is this change part of a browser theme/addon?
 

Kaworu

Coder
Dear @HadASpook :)

The code is in the Spoiler, divided between HTML and CSS, also in spoilers :) You just need to press some buttons with your mouse...? ;-)

Also, I try to change the scrollbar on a single webpage, and I just wanted to style it in the CSS of this particular webpage :) I am using no addons or themes, I wanna for this scrollbar to look exactly the same on every single browser no matter what (with the exclusion of Firefox, it is, I believe, styled differently?)
 

HadASpook

King Coder
Ah, my apologies, @Kaworu - my browser wasn't rendering the spoiler code.

Anyways, you are correct, your code will not work on Firefox as it uses a different browser engine(Gecko). One tiny problem though, as listed here on MDN:
Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Although it works(I have found examples for the property across the web), it's not always guaranteed to be stable or around forever as it is a non-standard feature of CSS - read the MDN article as it has some examples which may be of use. There is this though, which may answer some problems. Digital Ocean's tutorial may also help.

Hope this helps!
 

Kaworu

Coder
Ah, so I can both code it "properly" and it could still not work? That's confusing :laugh: But thank you for the explanation.

A question arises - is there a standard way to code that in CSS, at least for Chrome, or this feature is purely "experimental" and there's nothing better?

EDIT: scrollbar-color and scrollbar-width.? Maybe this will work?
 

HadASpook

King Coder
Ah, so I can both code it "properly" and it could still not work? That's confusing :laugh: But thank you for the explanation.

A question arises - is there a standard way to code that in CSS, at least for Chrome, or this feature is purely "experimental" and there's nothing better?

EDIT: scrollbar-color and scrollbar-width.? Maybe this will work?
Pretty much. Your code could be right, but as it's a non-standard CSS feature, browsers are fine to drop support should they feel like it(note: the W3C is the governing body who manage the HTML/CSS standards).

I remember there being prefixes that could be placed before element properties(e.g. -moz for Mozilla(?)), but I'm pretty sure these aren't supported by any browser nowadays(I'll check back with you soon on this if I can).

Try the two properties you think will work and please let me know if they did the trick.
 

Kaworu

Coder
Hm... the two things I have found have two problems with them:

1. It is only for Firefox (I really like Chrome).
2. They make additional scrollbar instead of changing the main one. Plus there's no thumb on this additional scrollbar, it seems (? :laugh:).

But thank you for the explanation, all this time I thought I coded something wrong :) If there's no proper way to change the "built-in" scrollbar in CSS, that's fine, I just thought I had made some source code error.
 

Johna

King Coder
Staff Team
Guardian
If there's no proper way to change the "built-in" scrollbar in CSS, that's fine, I just thought I had made some source code error.
I'm pretty sure there should be a way to change the scroll bar, because some websites like Outlook have custom scrollbars.
 

simong1993

King Coder
Staff Team
Guardian
No you cant change this :)

Best way to explain this is imagine your watching your favorite show live. Your show is your website, on your website that you have control over you can change what ever you want. Now everyone else at home is watching through there TV. You cant change there TVs. Does that make a bit more sense.
 
Top