HTML隐藏滚动条,还带着滚动效果
取巧的方法,原理是通过给滚动条所在块元素外嵌套一个块元素,调整边距,覆盖隐藏。例如第一步:给div外部创建一个同样大小的div。第二步:给父元素div设置超出部分遮挡,overflow: hidden;子元素div调整边距使其隐藏在父元素div之下即可。注意:如果是给整个页面设置,可以父元素(html)子元素(body)
·
一、覆盖隐藏
取巧的方法,原理是通过给滚动条所在块元素外嵌套一个块元素,调整边距,覆盖隐藏。
例如
第一步:给div外部创建一个同样大小的div。
.box1 {
width: 200px;
height: 200px;
}
.box2{
width: 100%;
height: 100%;
}
第二步:给父元素div设置超出部分遮挡,overflow: hidden;子元素div调整边距使其隐藏在父元素div之下即可。
.box1 {
width: 200px;
height: 200px;
overflow: hidden;
}
.box2{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-left: 15px;
}
注意:如果是给整个页面设置,可以父元素(html)子元素(body)
二、使用::-webkit-scrollbar设置displa属性none
div{
width: 200px;
height:200px;
overflow-y: scroll;
}
::-webkit-scrollbar{
display: none;
}
注意:此方法在IE上不生效。
HTML中保留滚动效果,不显示滚动条_I'm pig的博客-CSDN博客_html不显示滚动条
第二种
1、问题描述,见下图。
在不出现滚动条的情况下,头部和内容区域宽度相等,但是内容 区域的内容太多,必须得保留滚动效果,不出现滚动条。
2、解决方法
在内容区域外层套一个div,设置div的overflow:hidden样式,把内容区域的宽度设置为 “100% + 20px”;
<div style="width:400px;height:400px;border:1px solid gray">
<div style="height:40px;line-height:40px;background-color:yellow;text-align:center">头部</div>
<div style="height:360px;width:400px;overflow:hidden">
<!-- 内层带滚动效果的div,宽度比父级div宽20px,滚动条被父div隐藏了 -->
<div style ="height:360px;width:420px;background-color:green;overflow-y:scroll">
<p style="border-bottom:1px solid gray">哈哈哈</p>
<p style="border-bottom:1px solid gray">哈哈哈</p>
<p style="border-bottom:1px solid gray">哈哈哈</p>
<p style="border-bottom:1px solid gray">哈哈哈</p>
<p style="border-bottom:1px solid gray">哈哈哈</p>
<p style="border-bottom:1px solid gray">哈哈哈</p>
<p style="border-bottom:1px solid gray">哈哈哈</p>
<p style="border-bottom:1px solid gray">哈哈哈</p>
<p style="border-bottom:1px solid gray">哈哈哈</p>
<p style="border-bottom:1px solid gray">哈哈哈</p>
<p style="border-bottom:1px solid gray">哈哈哈</p>
<p style="border-bottom:1px solid gray">哈哈哈</p>
<p style="border-bottom:1px solid gray">哈哈哈</p>
<p style="border-bottom:1px solid gray">哈哈哈</p>
</div>
</div>
</div>
更多推荐
已为社区贡献12条内容
所有评论(0)