css Question posted in
Some basic documentation can be found here.

Css – 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.

Tags:

2

Answers


  1. 0

    It can be done using webkit styling itself.

    :root {
  --bg-color: #282c34; // here set a variable to represent the bg color
}

body {
  background-color: var(--bg-color); // use the pre-defined color variable
  color: white;
}

//override the scrollbar
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-color); //here set scrollbar bg-color
}

::-webkit-scrollbar-thumb {
  background: #888; // here you can set scrollbar thumb color
}
    Login or Signup to reply.
  2. 0

    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; */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search