HTML+CSS入门 如何修改滚动条默认样式
沉沙 2018-07-30 来源 : 阅读 1253 评论 0

摘要:本篇教程介绍了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知识!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 2 不喜欢 | 0
看完这篇文章有何感觉?已经有2人表态,100%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程