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; }
分类:
H5、CSS3
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
2018-07-27 ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
2018-07-27 上传图片,多图上传,预览功能,js原生无依赖
2018-07-27 node环境使用multer搭建一个图片接收服务器