html div+css3自定义水平滚动条及垂直滚动条详解(图文)

发布时间:2020-05-08 22:45:00 浏览量:0 来源:谷歌测速网

在做html div css3排版是有时固定div宽度用overflow-x水平方向内容溢出时的设置  overflow-y 垂直方向内容溢出时的设置,但默认的滚动条都太难度看,想怎么能自定义滚动条,下面谷歌测速网给详情讲解一下overflow自定义滚动条。

首先看下浏览器默认的滚动效果

image.png自定义滚动条用到以下代码:

/*垂直滚动条样式*/
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-button:vertical{display:none}
::-webkit-scrollbar-track:vertical{background-color:black}
::-webkit-scrollbar-track-piece{background:#F0F0F0}
::-webkit-scrollbar-thumb:vertical{background-color:#8E8E8E;border-radius:6px}
::-webkit-scrollbar-thumb:vertical:hover{background-color:#3B3B3B}
::-webkit-scrollbar-corner:vertical{background-color:#535353}
::-webkit-scrollbar-resizer:vertical{background-color:#FF6E00}

/*水平滚动条样式*/
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track:horizontal{background-color:black}
::-webkit-scrollbar-track-piece{background:#F0F0F0}
::-webkit-scrollbar-thumb:horizontal{background-color:#8E8E8E;border-radius:6px}
::-webkit-scrollbar-thumb:horizontal:hover{background-color:#3B3B3B}
::-webkit-scrollbar-corner:horizontal{background-color:#535353}
::-webkit-scrollbar-resizer:horizontal{background-color:#FF6E00}


自定义css3滚动条效果如下

image.png