PC版模块滚动不显示滚动条效果

之前对某个模块增长无滚动条的滚动效果，还须要找个插件才能实现，如今发现个简单方法，用普通的CSS就能够实现。

此方法只适用于不显示滚动条的滚动效果，若是须要自定义滚动条样式，仍是须要插件来实现。

HTML：

<div class="sidebar">
    <div class="sidebar-bd">
        内容
    </div>
</div>

CSS:

.sidebar{
    width: 50px;
    position: fixed;
    top: 0px;
    bottom: 0px;
    background-color: #666a82;
    z-index: 102;
    overflow-x: hidden;
}
.sidebar .sidebar-bd{
    width: 70px;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
}

以上代码的效果是左侧固定的竖条，当内容超过一屏的时候，可滚动。

原理是外层限制宽度，设置超过部分隐藏；内层宽度增长20px，滚动条显示在增长的20px里，由于外层限制了显示宽度，因此有滚动条的时候就不会显示出来。

这个方法兼容IE8及以上。