滚动条的样式

    /*
     * 功能:全局滚动条的样式
     * 描述:重新定义默认的滚动条的样式,变的更加的扁平化
     * 创建日期:2017-01-10
     * 更新日期:2017-01-10
     */
::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track  外层轨道
::-webkit-scrollbar-track-piece  内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-button:vertical {
  display: none;
}
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
  /*background-color: #e2e2e2;*/
}
::-webkit-scrollbar-track {
    border-radius: 5px;
}
::-webkit-scrollbar-track-piece {
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .3);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:vertical:hover {
  background-color: rgba(0, 0, 0, .25);
}
::-webkit-scrollbar-thumb:vertical:active {
  background-color: rgba(0, 0, 0, .35);
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。