CSS — 隱藏滾動條，依舊能夠滾動

公司的系統，在PC端能夠管理咱們的公衆號，在發佈模塊頁面時有一個預覽功能，呈現頁面在手機端的樣式。

作法很簡單，一會就完成了，可是在預覽內容過長時手機外框會有一個滾動條，影響美觀，因而就想把它去掉，有一個方法我的以爲很好用，記錄下。

思路：寫兩個 div 嵌套在一塊兒，高度都固定，外面的 div 固定寬度 而且 overflow: hidden; 裏面的div寬度比外面的稍寬，最好算好滾動條的寬度，overflow-y: auto;

初始實現是：

<!--手機預覽-->
<div class="preview-layer">
   <div class="preview-bg"></div>
   <div class="preview-phone">

     <div id="preview-html">

     </div>

   </div>
</div>

結合思路修改：

<!--手機預覽-->
<div class="preview-layer">
   <div class="preview-bg"></div>
   <div class="preview-phone">

     <div class="preview-container">
        <div id="preview-html">

        </div>
     </div>

   </div>
</div>

div.preview-container {
        position: absolute;
        width: 230px;
        height: 405px;    
        top: 62px;
        left: 15px;
        border: 2px solid #000;
        border-radius: 5px;
        outline: none;
        background-color: #fff;
        overflow: hidden;
    }

 #preview-html{
        width:247px;
        height:405px;
        overflow-y: auto;
    }

結果以下：