Why main scrollbar color doesn't change in Firefox?-CodePudding

I have problem with styling scrollbar for Firefox using var(...).

As we can see code below:

* {
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--sb-bgc);
  }

  scrollbar-color: var(--sb-bgc) transparent;
  scrollbar-width: thin;
}

everything should work fine but the main scrollbar in Firefox is not reading property in var(...). Deep in site, other scrollbars in Firefox work correctly...

If I use color directly, such as red or some variable like $someVaraible everything works fine. The problem is only when I use var(...) - I need it to switch colors between light and dark themes.

CodePudding user response：

Firefox use diffrent properties for scrollbar stylings you can add

.container {
  white-space: nowrap;
  overflow-y: hidden;
  width: 500px;
  
  **scrollbar-width: thin;
  scrollbar-color: #e3e3e3 transparent;**
}

for styling this

for example you can check this link https://codepen.io/reacraf/pen/ExaBZzZ

CodePudding user response：

I suggest you look at the browser compatibility section on the scrollbar styling page on Mozilla's site.

Currently only Firefox scrollbar feature:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

Style the scrollbar for Chrome and other browsers:

* {
  box-sizing: border-box;
  /* Firefox only */
  scrollbar-width: thin;
  scrollbar-color: rebeccapurple green;
}

html,
body {
  block-size: 300%;
}

/* Chrome, Edge, Safari... */
::-webkit-scrollbar-button {
  background: #5f13ca;
  border: 3px solid gray;
  border-radius: 4px;
}

::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}

::-webkit-scrollbar-thumb {
  background: #3b82f6;
  border: 3px solid gray;
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background: #a1a1aa;
}

::-webkit-scrollbar-corner {
  background: white;
  border: 3px solid gray;
  border-radius: 4px;
}

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
  display: block;
}

.container {
  block-size: 50vh;
  background-color: #ffecaf;
  overflow-y: scroll;
}
.container > .child {
  background-color: aquamarine;
  inline-size: 50%;
  min-block-size: 300%;
  margin: auto;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <div >
            <div >
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque
                molestias incidunt minus ea praesentium repellendus cum officia
                quas eius quasi distinctio libero non neque id quis inventore
                veritatis nemo, numquam nobis et voluptas voluptatum! Neque,
                blanditiis! Dolores vitae architecto ullam accusamus voluptatem
                ratione ab sit quae quaerat exercitationem fugiat sunt
                laboriosam cupiditate minus omnis labore, facilis sed ut!
                Possimus atque non nobis facilis numquam deleniti officiis
                accusamus consequuntur nisi repudiandae. Veniam, molestias illum
                saepe rerum fuga sapiente dolorum cupiditate pariatur porro ipsa
                blanditiis repudiandae illo eligendi, tempora esse, placeat
                officiis. Facilis, quasi. Facilis inventore hic, vel sint a
                fugit nesciunt.
            </div>
        </div>
    </body>
</html>