摘要:本篇教程介绍了HTML+CSS入门 如何修改滚动条默认样式,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
本篇教程介绍了HTML+CSS入门 如何修改滚动条默认样式,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
页面HTML:
1 <div class="inner">
2 <div class="innerbox">
3 <p style="height:200px;">这是内容111</p>
4 <p style="height:400px;">这里是内容222</p>
5 <p>这里是内容333</p>
6 </div>
7 </div>
css代码:
1 .inner{
2 width: 265px;
3 height: 400px;
4 position: absolute;
5 top: 33px;
6 left: 13px;
7 /*cursor: pointer;*/
8 overflow:hidden;
9 }
10 .innerbox{
11 overflow-x: hidden;
12 overflow-y: auto;
13 color: #000;
14 font-size: .7rem;
15 font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma;
16 height: 100%;
17 }
18 /*滚动条样式*/
19 .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
20 width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
21 height: 4px;
22 }
23 .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
24 border-radius: 5px;
25 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
26 background: rgba(0,0,0,0.2);
27 }
28 .innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/
29 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
30 border-radius: 0;
31 background: rgba(0,0,0,0.1);
32 }
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号