当我们的内容超出了我们的 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;
- }
行走在光阴里的人，谁不对初见怀揣一份美好向往和期待？谁不对初见心存一份眷恋和不舍？假如人生是一场途经，初见一定是人生路上最美的绽放。人生在世，不管你是青丝如云，还是白发如霜，当你念及“人生若只如初见”时，你的嘴角一定会不由自主地泛起一抹淡淡的笑意，你的内心一定会情不自禁地漾开一弯涟漪。一次萍聚，让多少午夜梦回，衣袖盈香？一次邂逅，让多少暗香浮动，刹那芳华？一份爱情，从开始到结束，初见，永远是最美丽的风景；一个故事，从上演到谢幕，初见，永远是最难忘的情节。初见，它可以是朦胧到极致，又可以是清晰到极致的画面；初见，它可以是淡雅到极致，又可以浓烈到极致的情愫。人生来去，虽然初见只是惊鸿一瞥，昙花一现，但它总是让人朝思暮想，念念不忘。
这个代码巧妙的向右移动了 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;
- }
岁月的经筒不停地摇转，假如世人能在懂得里皈依，那么，无论在叶落花谢的日子，还是在丰盈晴好的时光，人与人遇见时心里就能轻言一句：“哦，原来你也在这里”，人与人分离时便能挥手轻道一声：“你若安好，便是晴天”。红尘的初识里，总有许多是花开的惊喜；人间的离别里，总有许多是花落的悲哀。其实，人世间所有的爱恨痴缠都注定是彼此生命里的一程风雨、一道风景、一个故事。若是无缘，也许某些曾经便会在心灵深处印刻成遗憾和忧伤；若是有缘，一切的交集便能在流年的脉络里蜕变成旖旎和慈悲。
方法三：
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; }
