如何修改浏览器滚动条样式

作者: 图恩分类: 开发笔记阅读: 531字数: 482发布时间： 2022-02-16 17:57:12

随着生活水平和开发技术的提高，在网页设计上越来越重视用户体验，体现在有些细节也会得到一些改进，比如浏览器的滚动条样式。

默认的浏览器的滚动条样式比较粗犷，俗称傻大个，想要好看些怎么办呢，其实是可以修改的，包括颜色，宽度，当然ie不在这个范围。

以下为修改chrome浏览器样式的代码：

/* 滚动条整体样式 */

html body::-webkit-scrollbar {

width: 12px;/*对垂直流动条有效*/

height: 12px;/*对水平流动条有效*/

}

/* 滚动条里面小方块 */

html body::-webkit-scrollbar-thumb {

background-color: #E5E6EB;

background-clip: padding-box;

border: 3px solid transparent;

border-radius: 2px;

}

/* 滚动条里面轨道 */

html body::-webkit-scrollbar-track {

background-color: transparent;

}