修改页面滚动条样式

1、前提

前端页面经常会分成多个模块，模块中内容过多的话，就会产生滚动条，

2、问题

• 浏览器默认的滚动条样式不好看（ui设计师表示不能接受）
• 不同的浏览器，默认滚动条的样式不用，导致页面不统一

3、解决方案

自定义滚动条样式

//双冒号前面写的是产生滚动条的容器的类名
.classTrademark::-webkit-scrollbar {//设置滚动条的样式，height: 1px;width: 6px;
}
.classTrademark::-webkit-scrollbar-thumb {//设置滑块的样式border-radius: 4px;background: #bbbbbb;
}
.classTrademark::-webkit-scrollbar-track {//设置滑槽的样式background: #f3f3f3;border-radius: 4px;
}

4、css3 设置滚动条属性

查解决方式的时候，发现了这个css属性

• ::-webkit-scrollbar 滚动条整体部分
• ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
• ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
• ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
• ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
• ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
• ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

  webkit提供的还有更多的伪类，可以定制更丰富滚动条样式。https://webkit.org/blog/363/styling-scrollbars/

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！