Css实现漂亮的滚动条样式(兼容IE)-蒲公英云

Css实现漂亮的滚动条样式(兼容IE)

男娘i 2023-06-20 06:07 103阅读 0赞

WebKit内核浏览器效果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.container {
    height: 200px;
    width: 600px;
    overflow: auto;
}
.left_table {
    width: 800px;
    height: 400px;
}
/* WebKit内核浏览器 */
::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 2px;
}
::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #535353;
}
::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #ededed;
}
/* IE 浏览器 */
.container{
    /*三角箭头的颜色*/
    scrollbar-arrow-color: #fff;
    /*滚动条滑块按钮的颜色*/
    scrollbar-face-color: #0099dd;
    /*滚动条整体颜色*/
    scrollbar-highlight-color: #0099dd;
    /*滚动条阴影*/
    scrollbar-shadow-color: #0099dd;
    /*滚动条轨道颜色*/
    scrollbar-track-color: #0066ff;
    /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
    scrollbar-3dlight-color:#0099dd;
    /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
    scrollbar-darkshadow-color: #0099dd;
    /*滚动条基准颜色*/
    scrollbar-base-color: #0099dd;
}
</style>
</head>
<body>
<div class="container">
  <div class="left_table">
    日期
  </div>
</div>
</body>
</html>

WebKit内核浏览器 css 滚动条的设置：

::-webkit-scrollbar 滚动条整体部分，可以设置宽度等
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track  外层轨道
::-webkit-scrollbar-track-piece  内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式