html滚动条设置宽度,一看就会!
2022/6/15 4:20:06
本文主要是介绍html滚动条设置宽度,一看就会!,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
各位程序员同学们,现在许多项目中需要使用滚动条,在某些情况下,使用模拟滚动条。许多大型邮箱都是使用CSS样式设置的div滚动条宽度,那么CSS如何设置滚动条的宽度呢,下面就给大家说一说:
可以在CSS中使用::-webkit-scrollbar伪类选择器来设置滚动条样式. 在此伪类选择器中,可以通过width属性设置滚动条的宽度。可以使用以下伪元素选择器来修改各种Webkit浏览器的滚动条样式:
/*滚动条样式*/
.cal_bottom::-webkit-scrollbar {/*滚动条整体样式*/
width:4px;/*高宽分别对应横竖滚动条的尺寸*/
height:4px;
}
.cal_bottom::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius:5px;
-webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
background:rgba(0,0,0,0.2);
}
.cal_bottom::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
border-radius:0;
background:rgba(0,0,0,0.1);
}
以上便是关于html滚动条设置宽度的全部内容,有关更多详细信息div滚动条宽度,请关注慕课网其他文章~
这篇关于html滚动条设置宽度,一看就会!的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-15AntDesign项目实战:新手入门与初级应用教程
- 2024-11-15AntDesign-Form-rules项目实战:新手指南
- 2024-11-14ESLint课程:初学者指南
- 2024-11-14Form.List 动态表单课程:新手入门教程
- 2024-11-14Redux课程:新手入门完全指南
- 2024-11-13MobX 使用入门教程:轻松掌握前端状态管理
- 2024-11-12前端编程资料:新手入门指南与初级教程
- 2024-11-12前端开发资料入门指南
- 2024-11-12前端培训资料:适合新手与初级用户的简单教程
- 2024-11-12前端入门资料:新手必读指南