---

前言

當頁面的html結構巢狀的盒子很多的時候，可能會導致一個頁面中含有多個垂直滾動條。
這樣的話很影響頁面的樣式，所以我們需要隱藏滾動條的同時還支援滾動，下面就是利用css實現的兩種方法。

---

方法一、計算滾動條寬度並隱藏起來

原理：外面的盒子和裡面的盒子利用子絕父相進行佈局，裡面的盒子向右移動17個畫素，剛好等於滾動條的寬度（手動除錯得來的），並且該方法在chrome和IE中沒發現問題。

程式碼如下（示例）：

.outer-container{
     width: 300px;
     height: 200px;
     border:1px solid black;
     overflow:hidden;
     position:relative;
}
.inner-container{
    position:absolute;
    /*這四個方向的位置要寫全，否則不生效*/
    top:0;
    left:0;
    bottom:0;
    right:-17px;
    overflow-y: scroll;
}

<div class="outer-container">
    <div class="inner-container">
        我是好的會計師的介面和很快就放到恢復健康的時刻發揮空間發的是客戶說的框架還是會盡快哈加絨款返回給會盡快收到貨付款交電話費還是快捷的劃分空間的說法客戶反饋好地方客戶反饋就好地方科技健康的恢復健康的回覆客戶說的飛機客戶貸款減肥康師傅狂歡節的恢復健康的回覆寬度會發生框架的恢復快接電話反饋較好的發肯定是非框架和第三方發貨的回覆回覆的很快就到合肥科技和第三方儘快恢復得緊緊的返回度假會分開交電話費就肯定會分開交電話費摳腳大漢分開交電話費金鳳凰肯定會分開交電話費客戶開獎號肯定會分開交電話費
    </div>
</div>

效果如下：

方法二、css隱藏滾動條

原理：自定義滾動條的偽物件選擇器::-webkit-scrollbar，不過這個方法不相容IE，做移動端的可以使用。

程式碼如下：

.wrapper{
	width: 300px;
	height: 200px;
	overflow:auto;
}
/*chrome 和Safari*/
.wrapper::-webkit-scrollbar { width: 0 !important }
/*IE 10+*/
.wrapper { -ms-overflow-style: none; }
/*Firefox*/
.wrapper { overflow: -moz-scrollbars-none; }

<div class="wrapper">
        <div>我是好的會計師的介面和很快就放到恢復健康的時刻發揮空間發的是客戶說的框架還是會盡快哈加絨款返回給會盡快收到貨付款交電話費還是快捷的劃分空間的說法客戶反饋好地方客戶反饋就好地方科技健康的恢復健康的回覆客戶說的飛機客戶貸款減肥康師傅狂歡節的恢復健康的回覆寬度會發生框架的恢復快接電話反饋較好的發肯定是非框架和第三方發貨的回覆回覆的很快就到合肥科技和第三方儘快恢復得緊緊的返回度假會分開交電話費就肯定會分開交電話費摳腳大漢分開交電話費金鳳凰肯定會分開交電話費客戶開獎號肯定會分開交電話費</div>
</div>

效果如下：

參考部落格：http://caibaojian.com/hide-scrollbar.html