關於隱藏滾動條的問題（elemenui滾動條及瀏覽器滾動條）

一、問題再現

　　在用elementui寫項目的時候，如果當前頁面的內容超出了可視窗口就會出現滾動條，而瀏覽器又自帶滾動條，這樣的話就會出現兩個或以上滾動條，如下圖所示：

 

二、解決方案

1、添加<el-scroll></el-scroll>或者其他塊級標簽比如<div>包裹住你要滾動的部分

 2、設置滾動條的樣式

//注意樣式最好添加scoped，防止污染其他界面
::-webkit-scrollbar {
    //滾動條寬高，如果不需要顯示滾動條可設置寬高為0
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
    //滾動條顏色和圓角
  background-color: #dbd9d9;
  border-radius: 3px;
}

只需要設置::-webkit-scrollbar的樣式就可以隱藏elementui的滾動條並且不會影響超出當前可視窗口內容的顯示，差不多相當於不需要滾動條也可以滾動內容，

三、拓展

如何隱藏瀏覽器滾動條？

根據瀏覽器自適應原則，可用通過設置高度來隱藏瀏覽器自帶的滾動條，當內容的高度小於頁面可視高度（可通過document.documentElement.clientHeight獲取）時就不會出現瀏覽器滾動條從而達到隱藏瀏覽器滾動條的目的。

 

 

 

 如果想縮放的時候也不出現瀏覽器滾動條，可以通過$nextTick的方法在界面重新渲染的時候重新計算高度,如下方式，這樣怎么縮放都不會出現瀏覽器滾動條啦

 

四、效果圖