css修改浏览器滚动条样式
一、滚动条相关的属性
::-webkit-scrollbar滚动条整体部分，常用属性：width,height,background,border；
::-webkit-scrollbar-button滚动条两边的按钮，默认不设置时不显示，可设置高度、背景色、背景图片；
::-webkit-scrollbar-track整个滚动条去除两边按钮剩下的部分；
::-webkit-scrollbar-track-piecetrack去掉拖拽剩下的部分；
::-webkit-scrollbar-thumb滚动条里面可以拖动的那部分；
::-webkit-scrollbar-corner边角；
::-webkit-resizer定义右下角拖动块的样式二、基础改动，上例子
1fnreknenverknrefnrenfengrnengej1fnreknenverknrefnrenfengrnengejk1fnreknenverknrefnrenfengrnengejk1fnreknenverknrefnrenfengrnengejkk
1
1
1
1
1
1
1
1
1
.box {
width: 300px;
height: 100px;
overflow: scroll;
}
div::-webkit-scrollbar {
width: 8px;
/* 纵向滚动条的宽 */
height: 8px;
/* 横向滚动条的高 */
}
div::-webkit-scrollbar-thumb {
border-radius: 4px;
background: #EBEBEB;
}三、效果
【css修改浏览器滚动条样式】
文章图片
注：只对
设置了高度和滚动效果的容器 生效
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 操作系统|[译]从内部了解现代浏览器(1)
- 分享！如何分分钟实现微信扫二维码调用外部浏览器打开指定页面的功能
- 3.css浮动
- java|java b2b2c shop 多用户商城系统源码- config 修改配置
- iOS富文本为html时，修改默认字体颜色
- react-navigation|react-navigation 动态修改 tabBar 样式
- 8、Flask构建弹幕微电影网站-搭建后台页面-密码修改、主页控制面板
- http请求与响应
- 带你了解NodeJS事件循环