Opera 中的滚动条颜色

Question

我正在尝试更改 div 上垂直滚动条的背景颜色，因此在我的 React 应用程序中，它在深色模式下不应为白色。

我能找到的基于 webkit 的样式解决方案都无法在 Opera 中工作。我也找不到使用

react-custom-scrollbars-2

包的方法。我可以接受任何解决方案，无论是 CSS 还是基于 JavaScript。

这里有一个可以玩的沙盒。

Answer 1

可以使用

webkit

样式本身来完成。

: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
}