CSS — 溢出隱藏（ 隱藏捲軸，依舊可以滾動 ）

標籤：text   功能   span   style   修改   preview   預覽   發布   管理   

公司的系統，在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;    }

結果如下：

CSS — 溢出隱藏（ 隱藏捲軸，依舊可以滾動 ）