HTML修改滚动条样式
【HTML修改滚动条样式】直接上代码吧
.test-div {
width: 100px;
max-height: 100px;
padding-right: 12px;
overflow-y: auto;
}
/*滚动条整体样式*/
.test-div::-webkit-scrollbar {
width: 16px;
/*y轴滚动条的宽度*/
height: 16px;
/*x轴滚动条的高度*/
scrollbar-arrow-color: rgba(41, 96, 148, 0.8);
/*滚动箭头的箭头元素的颜色*/
}
/*滚动条里面小方块*/
.test-div::-webkit-scrollbar-thumb {
border-radius: 8px;
-webkit-box-shadow: inset 0 0 5px rgba(81, 168, 190, 0.8);
background: rgba(41, 96, 148, 0.8);
scrollbar-arrow-color: rgba(41, 96, 148, 0.8);
/*滚动箭头的箭头元素的颜色*/
}
/*滚动条里面轨道*/
.test-div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(30, 78, 100, 0.2);
border-radius: 8px;
background: rgba(40, 73, 104, 0.2);
}
推荐阅读
- django-前后端交互
- 爬虫数据处理HTML转义字符
- HTML基础--基本概念--跟着李南江学编程
- 3.css浮动
- java|java b2b2c shop 多用户商城系统源码- config 修改配置
- React.js的表单(六)
- iOS富文本为html时，修改默认字体颜色
- react-navigation|react-navigation 动态修改 tabBar 样式
- 瀑布流布局
- 8、Flask构建弹幕微电影网站-搭建后台页面-密码修改、主页控制面板