CSS】滚动条样式

1、浏览器隐藏滚动条

/*对html标签的溢出样式隐藏*/
html {
    overflow-x:hidden; //隐藏水平滚动条
    overflow-y:hidden;//隐藏垂直滚动条
}复制

2、给div盒子添加滚动条

overflow：scroll //内容溢出的时候x轴的y轴的滚动条都会展现

overflow-y：scroll //内容溢出的时候只会呼出y滚动条【常用】

overflow-x：scroll //内容溢出的时候只会呼出x滚动条

3、滚动条样式美化

        1：容器中滚动条可设置的元素：

::-webkit-scrollbar    //滚动条整体部分
::-webkit-scrollbar-button   //滚动条两端的按钮
::-webkit-scrollbar-track   // 外层轨道
::-webkit-scrollbar-track-piece    //内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner   //边角
::-webkit-resizer   ///定义右下角拖动块的样式复制

        2：元素后面还可以跟一些事件：

:horizontal//适用于任何水平方向上的滚动条
:vertical//适用于任何垂直方向的滚动条
:decrement//适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮
:increment//适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮
:start//适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的前面
:end //适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的后面
:double-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
:single-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
:no-button//表示轨道结束的位置没有按钮。
:corner-present//表示滚动条的角落是否存在。
:window-inactive//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。复制

4、滚动条样式美化参考

boxScroll是自定义的div容器的class

.boxScroll {
	overflow-y: auto;
}
.boxScroll::-webkit-scrollbar {
    width: 4px;
}
.boxScroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
}
.boxScroll::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}复制

给浏览器美化滚动条

/* 一般浏览器的不要太小，容易看不见 */
html::-webkit-scrollbar {
    width: 8px;
}
html::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(0,0,0,0.2);
}
html::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}复制