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

ppylox
·2/16/2022·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

网页设计日益重视用户体验,浏览器默认滚动条样式粗犷,可通过CSS修改其颜色、宽度等(IE除外)。以Chrome为例,使用`::-webkit-scrollbar`设置滚动条整体宽高,`::-webkit-scrollbar-thumb`设置滑块背景色、边框及圆角,`::-webkit-scrollbar-track`设置轨道背景色,从而实现滚动条样式的自定义美化。

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


默认的浏览器的滚动条样式比较粗犷,俗称傻大个,想要好看些怎么办呢,其实是可以修改的,包括颜色,宽度,当然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;

}

相关文章

评论 (0)

暂无评论,来写第一条吧