更改滚动条样式

liuwenjie_

于 2021-10-09 14:54:53 发布

阅读量296

点赞数

CC 4.0 BY-SA版权

文章标签： html css html5

本文链接：https://blog.youkuaiyun.com/liuwenjie_/article/details/120671010

通过修改CSS样式，可以全局或局部改变网页滚动条的外观，使其更加美观，提高用户体验。例如，将滚动条宽度和高度设置为10px，并将滑块背景颜色设为#1890ff，添加3px圆角，以此实现滚动条的个性化设计。配合在线颜色选择器工具，可以选择合适的颜色搭配，进一步优化滚动条视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做项目时，灰色滚动条往往让用户体验不佳，全局更改一下滚动条样式，就会让人耳目一新

下面代码粘贴即可

全局更改：

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: #1890ff;
  border-radius: 3px;
}

局部更改：

div::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
/* 滚动条的滑块 */
div::-webkit-scrollbar-thumb {
  background-color: #1890ff;
  border-radius: 3px;
}

效果：

提供在线免费网站供大家选取颜色：

链接：

在线颜色选择器工具/RGB颜色查询对照表 - 颜色相关工具 - 脚本之家在线工具