滚动条样式

最新推荐文章于 2025-05-04 17:04:55 发布

MR·Feng

最新推荐文章于 2025-05-04 17:04:55 发布

阅读量298

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/weihaifeng163/article/details/88399446

版权

css 专栏收录该内容

6 篇文章

订阅专栏

样式一：

HTML部分：

<table style="height: 410px" id="bridge_forecast_table">
  <tr><th> id </th><th> sensor_code </th><th> value </th><th> time </th></tr>
</table>

CSS部分：

table#bridge_forecast_table::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    height: 1px;
}
table#bridge_forecast_table::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: #F90;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%,
                      transparent 25%,
                      transparent 50%,
                      rgba(255, 255, 255, .2) 50%,
                      rgba(255, 255, 255, .2) 75%,
                      transparent 75%, transparent);
}
table#bridge_forecast_table::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    /*border-radius: 10px;*/
    background: #EDEDED;
}

效果图：

样式二：

HTML部分：

<div class="test test-1">
  <div class="scrollbar"></div>
</div>

CSS部分：

.test{
    width: 50px;
    height: 200px;
    overflow: auto;
    float: left;
    margin: 5px;
    border: none;
}
.scrollbar{
    width: 30px;
    height: 300px;
    margin: 0 auto;
 
}
.test-1::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;
    height: 1px;
}
.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #535353;
}
.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
}

效果图：