一個頁面，當div的高度固定時，裡面內容如果過多，將會產生溢位，從而影響整體的美觀。這時候，我們一般會設定以下CSS樣式，為頁面新增滾動條。

overflow: auto / scroll;
/** 單獨為橫向和豎向設定滾動條 **/
overflow-x: auto / scroll;
overflow-y: auto / scroll;

有一種場景是頁面內部包裹了很多個元件，頁面本身具有滾動條，元件內部又由於高度問題設定滾動條，這時候就會出現雙滾動條的情況，某方面來說，會很累贅，同樣影響頁面美觀。因此，我們需要在滿足頁面可滾動的同時去掉滾動條。這裡我們使用以下自定義滾動條的偽物件選擇器 ::-webkit-scrollbar

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

如果要相容 PC 其他瀏覽器（IE、Firefox 等），可以使用以下方法。在容器外面再巢狀一層 overflow:hidden 內部內容再限制尺寸和外部巢狀層一樣，就變相隱藏了。

 <div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div
 
>
 </div>

.outer-container,.content {
	width: 200px; 
	height: 200px;
}
.outer-container {
    position: relative;
    overflow: hidden;
}
.inner-container {
    position: absolute; 
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
 /* for Chrome */
.inner-container::-webkit-scrollbar
 
 {
    display: none;
}

如此便可實現隱藏。

最後，希望對你有所幫助。願安。