浏览器滚动条定制


浏览器自带滚动条样式，我们可能对其不满意，那我们就定制一下滚动条样式。

正文

暂时只讲一下webkit内核的浏览器滚动条定制：

::-webkit-scrollbar        滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。

::-webkit-scrollbar-button      滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

::-webkit-scrollbar-track         外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

::-webkit-scrollbar-track-piece        内层轨道，滚动条中间部分（除去）。

::-webkit-scrollbar-thumb               滚动条里面可以拖动的那部分

::-webkit-scrollbar-corner               边角

::-webkit-resizer                       定义右下角拖动块的样式

注意：对以上各个部分定义width,height时。有如下功能：若是水平滚动条，则width属性不起作用，height属性用来控制滚动条相应部分竖直方向高度； 若是竖直滚动条，则height属性不起作用，width属性用来控制相应部分的宽度。

举例，在css中写入：

::-webkit-scrollbar {
    width: 2px;
}

::-webkit-scrollbar:horizontal
{
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: #FFFFFF;
}

::-webkit-scrollbar-thumb {
    background-color: #bbbbbb;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #9c3
}

::-webkit-scrollbar-thumb:active {
    background-color: #00aff0
}

/* 嫌box的滚动条太窄，我们写宽一些*/ 
.box::::-webkit-scrollbar {
    width: 10px;
}






参考资料

自定义IE浏览器滚动条样式 https://www.cnblogs.com/koleyang/p/5484922.html

返回