css修改scroll的默认滚动条样式

1、首先我们要给div一个固定的高度或者最大的高度(height)
2、设置overflow为scroll(如果只想保留横向或者竖向的滚动条的话,直接设置overflow-x或overflow-y)
3、给改div或者整个页面添加css,就可以了

 

复制代码
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 0.75rem;
        height: 0.75rem;
        background-color: #F5F5F5;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 0.375rem #999;
        border-radius: 0.625rem;
        background-color: #F5F5F5;
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        border-radius: 0.625rem;
        box-shadow: inset 0 0 0.375rem #999;
        background-color: #333;
    }
复制代码

 

复制代码
                &::-webkit-scrollbar {
                    width: 6px;
                    background-color: #fff;
                }
                &::-webkit-scrollbar-track {
                    background-color: transparent;
                    -webkit-border-radius: 2em;
                    -moz-border-radius: 2em;
                    border-radius: 2em;
                }
                &::-webkit-scrollbar-track-piece {
                    background-color: transparent;
                    -webkit-border-radius: 2em;
                    -moz-border-radius: 2em;
                    border-radius: 2em;
                }
                &::-webkit-scrollbar-thumb {
                    background-color: #e9e7e7;
                    -webkit-border-radius: 2em;
                    -moz-border-radius: 2em;
                    border-radius: 2em;
                }
复制代码

 

posted @   奔跑的太阳花  阅读(3404)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
历史上的今天:
2018-07-27 ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
2018-07-27 上传图片,多图上传,预览功能,js原生无依赖
2018-07-27 node环境使用multer搭建一个图片接收服务器
点击右上角即可分享
微信分享提示