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

男娘i 2023-06-20 06:07 21阅读 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 定义右下角拖动块的样式

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191207224819848.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA==,size_16,color_FFFFFF,t_70