一、覆盖隐藏

取巧的方法,原理是通过给滚动条所在块元素外嵌套一个块元素,调整边距,覆盖隐藏。

例如

第一步:给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>

 

HTML隐藏滚动条,还带着滚动效果_shijie_nihao的博客-CSDN博客_html 隐藏滚动条

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐