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