高效修改浏览器滚动条样式-快速上手

超级罗伯特

已于 2024-02-20 15:58:03 修改

阅读量458

点赞数 7

文章标签： javascript 前端 css

于 2024-02-20 15:50:58 首次发布

本文链接：https://blog.csdn.net/m0_68633804/article/details/136192037

版权

本文介绍了如何使用CSS的Webkitscrollbar相关属性如::-webkit-scrollbar,::-webkit-scrollbar-thumb和::-webkit-scrollbar-track来定制Web页面中的滚动条样式，包括宽度、颜色和圆角等，以提升用户体验。

摘要由CSDN通过智能技术生成

/* 整个滚动条 */
.box2::-webkit-scrollbar {
  /* 对应纵向滚动条的宽度 */
  width: 10px;
  /* 对应横向滚动条的宽度 */
  height: 10px;
}

/* 滚动条上的滚动滑块 */
.box2::-webkit-scrollbar-thumb {
  background-color: #162c74;
  border-radius: 32px;
}

/* 滚动条轨道 */
.box2::-webkit-scrollbar-track {
  background-color: #dbeffd;
  border-radius: 32px;
}

另外，还可以通过::-webkit-scrollbar-track和::-webkit-scrollbar-corner等元素来设置滑轨和滑角的样式，具体用法和上面类似。

直接复制上面代码去测试你现有的滚动条，再改吧改吧，基本没问题