修改页面滚动条样式

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）
• ::-we