下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。
当我们的内容超出了我们的 div，往往会出现滚动条，影响美观，尤其是当我们在做一些导航菜单的时候，滚动条一出现就破坏了 UI 效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。我们经常在前端开发中遇到这种情况，最容易想到的是加一个 iscroll 插件，但其实现在 CSS 也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。
方法一：
计算滚动条宽度并隐藏起来，其实我只是把滚动条通过定位把它隐藏了起来，下面给一个简化版的代码：
<div class="outer-container">
<div class="inner-container">
......
</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 class="outer-container">
<div class="inner-container">
行走在光阴里的人，谁不对初见怀揣一份美好向往和期待？谁不对初见心存一份眷恋和不舍？假如人生是一场途经，初见一定是人生路上最美的绽放。人生在世，不管你是青丝如云，还是白发如霜，当你念及“人生若只如初见”时，你的嘴角一定会不由自主地泛起一抹淡淡的笑意，你的内心一定会情不自禁地漾开一弯涟漪。一次萍聚，让多少午夜梦回，衣袖盈香？一次邂逅，让多少暗香浮动，刹那芳华？一份爱情，从开始到结束，初见，永远是最美丽的风景；一个故事，从上演到谢幕，初见，永远是最难忘的情节。初见，它可以是朦胧到极致，又可以是清晰到极致的画面；初见，它可以是淡雅到极致，又可以浓烈到极致的情愫。人生来去，虽然初见只是惊鸿一瞥，昙花一现，但它总是让人朝思暮想，念念不忘。
</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 class="outer-container">
<div class="inner-container">
<div class="content">
......
</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 class="outer-container">
<div class="inner-container">
<div class="element">
岁月的经筒不停地摇转，假如世人能在懂得里皈依，那么，无论在叶落花谢的日子，还是在丰盈晴好的时光，人与人遇见时心里就能轻言一句：“哦，原来你也在这里”，人与人分离时便能挥手轻道一声：“你若安好，便是晴天”。红尘的初识里，总有许多是花开的惊喜；人间的离别里，总有许多是花落的悲哀。其实，人世间所有的爱恨痴缠都注定是彼此生命里的一程风雨、一道风景、一个故事。若是无缘，也许某些曾经便会在心灵深处印刻成遗憾和忧伤；若是有缘，一切的交集便能在流年的脉络里蜕变成旖旎和慈悲。
</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)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
