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

PC版模組滾動不顯示捲軸效果