4

I'm trying to change the color of a scrollbar-thumb in my SCSS file.

I tried using the scrollbar-color, but only using webkit is working.

// NOT WORK
.demo {
  scrollbar-thumb: #0f0f0f;
}                          


// WORK
.demo{
  //....

  &::-webkit-scrollbar-thumb {
    background-color: #0f0f0f;
  }
}

I understood that webkit is working only with some browsers, so I want to make it as general as possible, so whatever browser the user uses, it'll show the new color.

Thanks all

shr7
  • 163
  • 1
  • 2
  • 6
  • this might help you figure it out ; https://stackoverflow.com/questions/12788262/sass-browser-vendor-prefixes also : https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass can be usefull to know if you did not , beside, you can also include plain css aside . What you try to do here is different. you try to turn a rule into a selector. Mind FF too https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars – G-Cyrillus Sep 08 '19 at 14:53
  • that's called a vendor prefix. In this case, it only works on WebKit based browsers (Chrome, Safari, and newest Edge) [CanIUse.com](https://caniuse.com/#search=webkit-scrollbar-thumb) is a good resource to figure out where things are supported. – Bryce Howitson Sep 08 '19 at 19:48

0 Answers0