如何使用 JS 更改滚动条的形状 [关闭]答案

【问题标题】：how can I change the shape of scroller with JS [closed]如何使用 JS 更改滚动条的形状 [关闭]
【发布时间】：2018-07-13 11:06:32
【问题描述】：

我很困惑其他前端开发人员如何更改网页的滚动条形状以使其看起来更好看我如何使用 JS 来实现这一点？

【问题讨论】：

你需要清楚你需要什么，包括代码
请阅读How to Ask。你应该在问这里之前做你自己的研究。（当您在这里提出问题时，您仍然需要在问题上付出比目前更多的努力。）
github.com/inuyaksa/jquery.nicescroll

标签： javascript jquery html css

【解决方案1】：

W3Schools

从他们的例子中：

<style>
/* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: red; 
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #b30000; 
}
</style>

【讨论】：

【解决方案2】：

您是否有任何特定原因需要使用 JavaScript 来实现这一点？

这可以很简单地使用 css 实现：

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

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

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 2px solid blue;
}

【讨论】：