css实现滚动条美化功能

全屏阅读
  • 基本信息
  • 作者:
  • 作者已发布:920篇文章
  • 发布时间:2023年04月16日 9:10:06
  • 所属分类:CSS, html, WEB前端
  • 阅读次数:375次阅读
  • 标签:

最近在给客户做一个运维管理平台,前端有个地方的滚动条特别丑,当时也没在意这些细节,项目上线几个月后我实在受不了这个滚动条了,我在网上东找西找,轻轻松松改好了。

一、美化滚动条CSS

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        background-color: rgba(0,0,0,.2);
    }

    /*定义滚动条轨道
 内阴影+圆角*/
    ::-webkit-scrollbar-track
    {
        -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
        border-radius:10px;
        background-color:#F5F5F5;
    }
    /*定义滑块
     内阴影+圆角*/
    ::-webkit-scrollbar-thumb
    {
        border-radius:10px;
        -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
        background-color: #b3b3b3;
    }

二、没修改前效果如下

image.png

三、修改后效果如下

image.png

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明:本文由mpxq168发布,所有内容仅代表个人观点。版权归恒富网mpxq168共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 0 条留言 其中:访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言!