更改滚动条样式

自定义滚动条样式提升网页体验

最新推荐文章于 2024-10-16 22:10:28 发布

原创最新推荐文章于 2024-10-16 22:10:28 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #html5

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

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

下面代码粘贴即可

全局更改：

::-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颜色查询对照表 - 颜色相关工具 - 脚本之家在线工具