纯 css 重置滚动条样式

最新推荐文章于 2023-12-28 14:47:08 发布

小蘑菇0629

最新推荐文章于 2023-12-28 14:47:08 发布

阅读量978

点赞数 1

分类专栏：学习笔记 css 滚动条文章标签： css 滚动条滚动条样式

本文链接：https://blog.csdn.net/weixin_41807530/article/details/101674696

版权

学习笔记同时被 3 个专栏收录

49 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

滚动条

1 篇文章 0 订阅

订阅专栏

*滚动条*/
::-webkit-scrollbar {

    width: 10px;

    height: 10px;
}

/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track {
    /*背景内阴影*/
    /*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/

    border-radius: 10px;
    /*滚动条背景颜色*/
    /*background-color: rgba(0, 163, 245, 0.4);*/

}

/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {

    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

    background-color: #eff1f7;

}

/*滑块hover效果*/

::-webkit-scrollbar-thumb:hover {

    border-radius: 5px;
     /*内阴影*/

    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

    background: #eef2ff

}

效果：