滚动条样式修改

最新推荐文章于 2025-12-02 22:03:53 发布

原创最新推荐文章于 2025-12-02 22:03:53 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #javascript

本文介绍了如何使用CSS针对Webkit内核浏览器定制滚动条的外观，包括宽度、轨道颜色和滑块样式，以及鼠标悬停时的改变。

/* // 滚动条宽度 */
div::-webkit-scrollbar {
  width: 6px;
}
/* // 滚动条轨道 */
div::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
/* // 小滑块 */
div::-webkit-scrollbar-thumb {
  background: #9a9b9c49;
  border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

这是参考一个大佬的但是忘记是哪一篇了放在这里方便以后查看