javascriptcssreactjswebkitopera

Scrollbar color in Opera

I am trying to change the background color of a vertical scrollbar on a div, so it should not be white in the dark mode in my react app.

None of the webkit-based styling solutions I could find worked in Opera. Neither could I find a way with react-custom-scrollbars-2 package. I would be fine with any solution, be it CSS or JavaScript-based.

Here is a sandbox to play with.

Solution

  • Styling scrollbars always seems a not-so-simple task. Personally, I always prefer -webkit-scrollbar and -webkit-scrollbar-thumb for implementing this. Here is the CSS for the same:

    ::-webkit-scrollbar {
  width: 20px;
  /* background-color: #custom_bg_color; */
}

::-webkit-scrollbar-thumb {
  background-color: #6d6d6d;
  /* border-radius: 10px; */
  /* height: 20px; */
}