CSS隱藏overflow默認滾動條同時保留滾動效果

主要應用於移動端場景，仿移動端滾動效果。對於隱藏滾動條，眾所周知overflow:hidden,但是想要的滾動效果也沒了。

所以對於移動端webkit內核提供一個偽類選擇器：

.element::-webkit-scrollbar {display:none}；

 對於這個選擇器的相關介紹，參考下面地址：

 Styling Scrollbars

 Custom Scrollbars in WebKit

還有一種兼容其他瀏覽器的方法，在內容區域外面套了兩個父元素，然后通過修改父元素的樣式，變相實現隱藏效果如下：

.out_box {
    /*將外面的box高度和內容區域congtents設置一樣，寬度比內容小20px，20px的寬度足以隱藏滾動條*/
    width:180px;
    height: 200px;
    position: relative;
    overflow: hidden;
    background: #EEE;
}            
.inner_box {
    position: absolute;
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
.contents {
    width: 200px;
    height: 200px;
}

<div class="out_box">
    <div class="inner_box">
        <div id="content" class="contents">
            <!--內容區域-->        
        </div>
    </div>
</div>

box寬度也是200px時如下圖：

box寬為180px，效果如下所示：

達到我們想要的效果！