当前位置:Gxlcms > html代码 > html中关于div滚动条样式设计的实例

html中关于div滚动条样式设计的实例

时间:2021-07-01 10:21:17 帮助过:41人阅读

html中关于div滚动条样式设计的实例

::-webkit-scrollbar-track-piece{
background-color:#fff;/*滚动条的背景颜色*/
-webkit-border-radius:0;/*滚动条的圆角宽度*/
}
::-webkit-scrollbar{
width:8px;/*滚动条的宽度*/
height:8px;/*滚动条的高度*/
}
::-webkit-scrollbar-thumb:vertical{/*垂直滚动条的样式*/
height:50px;
background-color:#999;
-webkit-border-radius:4px;
outline:2px solid #fff;
outline-offset:-2px;
border:2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{/*滚动条的hover样式*/
height:50px;
background-color:#9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal{/*水平滚动条的样式*/
width:5px;
background-color:#CCCCCC;
-webkit-border-radius:6px;
}
div::-webkit-scrollbar{
    width:8px;/*滚动条的宽度*/
  }

通过该种方式设计div的滚动条样式。

以上就是html中关于div滚动条样式设计的实例的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行