时间:2021-04-16
下面是css修改滚动条默认样式的代码:
html代码
<div class="inner">
<div class="innerbox">
<p style="height:200px;">这是内容111</p>
<p style="height:400px;">这里是内容222</p>
<p>这里是内容333</p>
</div>
</div>
css代码
.inner{
width: 265px;
height: 400px;
position: absolute;
top: 33px;
left: 13px;
overflow:hidden;
}
.innerbox{
overflow-x: hidden;
overflow-y: auto;
color: #000;
font-size: .7rem;
font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma;
height: 100%;
}
.innerbox::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.innerbox::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.innerbox::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
写过挺多项目都需要改变滚动条的默认样式并不想单独下载和引入插件因此纯css修改默认滚动条的样式这次算统一整理下方法,直接上代码。&::-webkit-scrol
css滚动条样式修改的代码.scroll::-webkit-scrollbar{//纵向滚动条和横向滚动条宽度width:1px;height:1px;}.sc
前段时间,在做项目的时候,遇到了需要修改滚动条的样式,而滚动条默认的样式比如下图:这与设计图的样式是不一致的,然后就需要修改滚动条的样式了,首先给样式名为&rd
windows下默认的滚动条样式巨丑,项目中又有比较多地方会显示滚动条,故回头翻了一下CSS3,还真能不用插件实现自定义滚动条的样式,正合我意代码如下:/定义滚
css设置overflow:scroll滚动条的样式::-webkit-scrollbar{width:6px;height:6px;ba