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及以上。