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

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


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

}

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):