Javascript 如何自定义滚动条

我想自定义div中的滚动条。我使用了以下代码来更改它。但我不知道如何更改滚动按钮，也没有得到我想要的结果 此外，它在Mozilla Firefox浏览器中不起作用。 我想要的是：

：-webkit滚动条{ 宽度：3倍； } ：-webkit滚动条轨迹{ 背景：888人； } ：-webkit滚动条拇指{ 背景：888人； } ：-webkit滚动条拇指：悬停{ 背景：555人； }

---

.

您需要为该div定义类或id，然后将CSS类添加到该特定div：

#MY-div-id::-webkit-scrollbar {
width: 3px;
}

#MY-div-id::-webkit-scrollbar-track {
background: #888;
}

#MY-div-id::-webkit-scrollbar-thumb {
background: #888;
}

#MY-div-id::-webkit-scrollbar-thumb:hover {
background: #555;
}

v64中自定义滚动条的Firefox实现集

.您的div选择器{ 滚动条颜色：0a4c95 c2d2e4；/*轨迹颜色和拇指颜色*/ }

---

如果您希望在草图中使用一致的样式，我建议您使用第三方JavaScript选项，就像有很多这样。

这里的代码几乎与css匹配。您只需在以下位置更改颜色和图像：-webkit滚动条拇指尝试小图像，您可能还需要调整位置

.集装箱{ 利润率：40px自动； 宽度：1000px； 高度：200px； 溢出y：滚动； } .container:：-webkit滚动条{ 宽度：20px； } .container:：-webkit滚动条轨迹{ 背景：番茄； 左边框：9px纯白； 右边框：9px纯白； } ：-webkit滚动条拇指{ 背景图片：urlhttp://i.imgur.com/ygGobeC.png; } .容器.物品{ 高度：20px； 边缘底部：5px； 背景：银； } .容器。项目：最后一个子项{ 页边距底部：0； } .集装箱{ 方向：rtl； }

---

分享你的代码@zharf pzhthanks..你能看到我的图像吗？我是如何定制句柄的？是的，目前还不可能通过跨浏览器的纯CSS实现。您可以更改滚动条的轨迹和拇指的颜色，也可以更改滚动条的宽度。除此之外，还需要JavaScript。