css如何去掉或修改浏览器默认滚动条
去掉浏览器默认滚定条很简单,只需在出现滚动条的元素加-webkit-scrollbar属性即可,代码如下:/* .box为当前出现滚动条的容器 */.box::-webkit-scrollbar {display: none}...
·
去掉浏览器默认滚定条
很简单,只需在出现滚动条的元素加-webkit-scrollbar属性即可,代码如下:
/* .box为当前出现滚动条的容器 */
.box::-webkit-scrollbar {
display: none
}
如果想改变它的样式:
/*滚动条的宽度*/
.ant-drawer-wrapper-body::-webkit-scrollbar {
width: 4px;
height: 105px;
}
/*外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果*/
.ant-drawer-wrapper-body::-webkit-scrollbar-track {
width: 4px;
height: 80%;
background-color: #E0E6F3;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
/*滚动条的设置*/
.ant-drawer-wrapper-body::-webkit-scrollbar-thumb {
background-color: #A4A9C1;
background-clip: padding-box;
min-height: 28px;
max-height: 105px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
/* display: none; */
}
/*滚动条移上去的背景*/
/* .ant-drawer-wrapper-body::-webkit-scrollbar-thumb:hover {
background-color: #fff;
} */
还有一种(效果在代码下方):
::-webkit-scrollbar {
width: 5px;
height: 10%
}
::-webkit-scrollbar-track {
background-color: #f1f1f1;
border-radius: 10px;
}
/* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-thumb {
background-color: #A4A9C1;
border-radius: 10px;
}
效果:
更多推荐
已为社区贡献1条内容
所有评论(0)