隐藏滚动条并且还能滚动的方式

最新推荐文章于 2021-12-22 17:18:54 发布

原创最新推荐文章于 2021-12-22 17:18:54 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#滚动条隐藏

bronze 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用CSS来隐藏滚动条同时控制内容溢出的方法，通过绝对定位和负数偏移量使子元素部分隐藏，同时展示了如何在不同浏览器中隐藏滚动条，包括Chrome、Safari、IE10+和Firefox。

1.使用css的解决办法

原理就是让子盒子定位负数实现隐藏。
下边直接贴代码:
    <div class="outer-container">
        <div class="inner-container">
           <div>这里是测试的内容+++++++++++++++++++++++</div>
           <div>这里是测试的内容+++++++++++++++++++++++</div>
           <div>这里是测试的内容+++++++++++++++++++++++</div>
           <div>这里是测试的内容+++++++++++++++++++++++</div>
           <div>这里是测试的内容+++++++++++++++++++++++</div>
           <div>这里是测试的内容+++++++++++++++++++++++</div>
           <div>这里是测试的内容+++++++++++++++++++++++</div>
        </div>
    </div>
    css:        
    .outer-container{
	width: 360px;
	height: 200px;
	position: relative;
	overflow: hidden;
}
.inner-container{
	position: absolute;
	left: 0;
	top: 0;
	right: -17px;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: scroll;
}

2.用css的scrollbar隐藏滚动条,缺点是不兼容ie

chrome 和Safari
		::-webkit-scrollbar { width: 0 !important }
IE 10+
.element { -ms-overflow-style: none; }
Firefox
.element { overflow: -moz-scrollbars-none; }

效果如图:
在这里插入图片描述