如何更改css中的滚动条样式[重复]答案

【问题标题】：How to change the scroll-bar style in css [duplicate]如何更改css中的滚动条样式[重复]
【发布时间】：2015-07-05 20:43:45
【问题描述】：

如何更改 css 中的滚动条样式或更改 chrome 或任何浏览器中的不同 UI。我见过许多具有不同用户界面的网站。
这可以用css 或html 完成吗？

【问题讨论】：

使用 CSS3 你可以实现这一点。您可能会发现 this 文章很有帮助。

标签： html css google-chrome

【解决方案1】：

检查here。也可以查看this link。

像这样使用 css

html {
  background: lightgrey;
  height: 100%;
  overflow: hidden;
}
body {
  height: 100%;
  background: whitesmoke;
  overflow: scroll;
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
  padding: 3em;
  font: 100%/1.4 serif;
  border: 1px solid rgba(0,0,0,0.25)
}
p {
  margin: 0 0 1.5em;
}

body::-webkit-scrollbar {
    width: 0.2em;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: red;
  outline: 1px solid red;
}

【讨论】：

【解决方案2】：

你可以这样试试，

body {
    scrollbar-face-color: #000000;
    scrollbar-shadow-color: #2D2C4D;
    scrollbar-highlight-color:#7D7E94;
    scrollbar-3dlight-color: #7D7E94;
    scrollbar-darkshadow-color: #2D2C4D;
    scrollbar-track-color: #7D7E94;
    scrollbar-arrow-color: #C1C1D1; 
}

还有一个EXAMPLE，带有悬停效果。

【讨论】：

【解决方案3】：

我刚刚通过这个主题了解到我们可以在 CSS3 中自定义滚动条... 但它似乎并不是在每个浏览器中都非常有效。

我建议您选择（如果可以的话）一个 jQuery 插件。喜欢http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html。我经常使用它。它非常强大、可定制且可互操作！

【讨论】：