Chrome 默认滚动条的 CSS答案

【问题标题】：CSS for default scrollbar of ChromeChrome 默认滚动条的 CSS
【发布时间】：2019-09-18 23:02:38
【问题描述】：

我只需要使用 CSS 自定义 Chrome 浏览器的滚动条的宽度，但还需要其他的东西（如悬停效果、悬停颜色、滚动条轨道颜色、滚动条按钮颜色等、单击时滚动条的颜色等）照原样。

我该怎么做？我知道我们可以使用以下 css 更改滚动条的宽度：

::-webkit-scrollbar {
    width: 12px;
}

【问题讨论】：

css-tricks.com/the-current-state-of-styling-scrollbars 是一篇很好的文章，有几个很好的例子
@elveti - 我必须在其中放置这个 css 的文件名是什么？

标签： css google-chrome

【解决方案1】：

body::-webkit-scrollbar {
  width: 1em;
}
 
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

【讨论】：

【解决方案2】：

你可以这样做

::-webkit-scrollbar 用于整个滚动条

handle 是滚动条，您可以在其中添加这样的背景，也可以应用pseudo elements 或可拖动的滚动手柄。

track 是滚动条的progress bar。

::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #1B242F; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #04C2C9; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover{
    background: #04C2; 
}

更多信息请访问this链接

【讨论】：

但是我应该把这个css放在哪里？
你可以把它放在你的任何css文件中
我在哪里可以看到我有哪个 css 文件？给我一个名字。
您需要复制该代码并将其粘贴到代码的.css 文件中。
天哪！我想通过编辑本地 css 文件来更改浏览器中的滚动条，以便我的浏览器始终具有此颜色滚动条，无论我访问哪个网站。就像在我的本地个人资料中为 firefox 编辑 UserContent.css 一样。