CSS实现隐藏滚动条并可以滚动内容

概述当我们的内容超出了我们的div，往往会出现滚动条，影响美观，尤其是当我们在做一些导航菜单的时候，滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

当我们的内容超出了我们的 div，往往会出现滚动条，影响美观，尤其是当我们在做一些导航菜单的时候，滚动条一出现就破坏了 UI 效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。我们经常在前端开发中遇到这种情况，最容易想到的是加一个 iscroll 插件，但其实现在 CSS 也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。

方法一：

计算滚动条宽度并隐藏起来，其实我只是把滚动条通过定位把它隐藏了起来，下面给一个简化版的代码：

<div >

<div >

......

</div>

</div>

.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;

}

代码预览

<div >

<div >

行走在光阴里的人，谁不对初见怀揣一份美好向往和期待？谁不对初见心存一份眷恋和不舍？假如人生是一场途经，初见一定是人生路上最美的绽放。人生在世，不管你是青丝如云，还是白发如霜，当你念及“人生若只如初见”时，你的嘴角一定会不由自主地泛起一抹淡淡的笑意，你的内心一定会情不自禁地漾开一弯涟漪。一次萍聚，让多少午夜梦回，衣袖盈香？一次邂逅，让多少暗香浮动，刹那芳华？一份爱情，从开始到结束，初见，永远是最美丽的风景；一个故事，从上演到谢幕，初见，永远是最难忘的情节。初见，它可以是朦胧到极致，又可以是清晰到极致的画面；初见，它可以是淡雅到极致，又可以浓烈到极致的情愫。人生来去，虽然初见只是惊鸿一瞥，昙花一现，但它总是让人朝思暮想，念念不忘。

</div>

</div>

<style>

.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;

}

</style>

这个代码巧妙的向右移动了 17 个像素，刚好等于滚动条的宽度，这个值是我手动调试得来的，在 Chrome 和 IE 没发现问题。

方法二：

使用三个容器包围起来，不需要计算滚动条的宽度，该代码最早是在 Microsoft 博客上看到的，跟我上面的思路差不多，只不过人家里面又加多了一个盒子，将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动，代码如下：

<div >

<div >

<div >

......

</div>

</div>

</div>

.element,.outer-container {

wIDth: 200px;

height: 200px;

}

.outer-container {

border: 5px solID purple;

position: relative;

overflow: hIDden;

}

.inner-container {

position: absolute;

left: 0;

overflow-x: hIDden;

overflow-y: scroll;

}

.inner-container::-webkit-scrollbar {

display: none;

}

代码预览

<div >

<div >

<div >

岁月的经筒不停地摇转，假如世人能在懂得里皈依，那么，无论在叶落花谢的日子，还是在丰盈晴好的时光，人与人遇见时心里就能轻言一句：“哦，原来你也在这里”，人与人分离时便能挥手轻道一声：“你若安好，便是晴天”。红尘的初识里，总有许多是花开的惊喜；人间的离别里，总有许多是花落的悲哀。其实，人世间所有的爱恨痴缠都注定是彼此生命里的一程风雨、一道风景、一个故事。若是无缘，也许某些曾经便会在心灵深处印刻成遗憾和忧伤；若是有缘，一切的交集便能在流年的脉络里蜕变成旖旎和慈悲。

</div>

</div>

</div>

<style>

.element,.outer-container {

wIDth: 200px;

height: 200px;

}

.outer-container {

border: 5px solID purple;

position: relative;

overflow: hIDden;

}

.inner-container {

position: absolute;

left: 0;

overflow-x: hIDden;

overflow-y: scroll;

}

.inner-container::-webkit-scrollbar {

display: none;

}

</style>

方法三：

CSS 隐藏滚动条，同时该文章还分享了一种通过 CSS 隐藏滚动条的方法，不过这个方法不兼容 IE，做移动端的可以使用。那就是自定义滚动条的伪对象选择器::-webkit-scrollbar，详情请看之前的文章：CSS3 自定义 webkit 滚动条样式

Chrome 和 Safari

.element::-webkit-scrollbar { wIDth: 0 !important }

IE 10+

.element { -ms-overflow-style: none; }

firefox

.element { overflow: -moz-scrollbars-none; }

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的CSS实现隐藏滚动条并可以滚动内容全部内容，希望文章能够帮你解决CSS实现隐藏滚动条并可以滚动内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。