嘻嘻，抽空出個教程，這個我也是看別人的文章學來的哈哈
拿element-ui官網的這個container佈局容器做例子吧，當我們展開所有條目的時候，右側就會出現瀏覽器自帶的滾動條，而且這個滾動條還會把左邊的上下箭頭擠過去…說白了就是會佔間距，雖然還看得過去…但是給別人的感覺就很low
然後我們再把鼠標移動到官網左側的列表欄，就能看到element-ui自帶的滾動條啦，很好看吧
那麼我們怎樣才能用上這個滾動條呢，教程開始！
element-ui是有這個組件的，
<el-scrollbar></el-scrollbar>
雖然官網文檔沒有說明，但是我們能從上面這張圖看出來，也能在源碼裏找到
1.我們把上面的實例代碼複製到idea中（我這個稍有改動），在aside和menu之間插入一個el-scrollbar標籤，並給它一個class
2.然後我們在style裏添加下面的樣式，這裏注意要把style裏的scoped屬性（作用是讓該style標籤裏的樣式只作用在當前組件中）刪掉，後面會說原因
<style >
.page-scroll {
height: 100%;
}
.page-scroll .el-scrollbar__wrap {
overflow-x: hidden;
}
</style>
3.然後運行項目看效果，簡約好看，縱享絲滑
這樣就能讓我們的網頁擁有統一風格的優雅滾動條啦
說一下上面提到的刪掉scoped，如果不刪，效果是這樣子的
底部就會出現一個很醜的橫向滾動條，我們要用overflow-x: hidden將其隱藏，這個橫向滾動條是受.el-scrollbar__wrap 控制的，可是 .el-scrollbar__wrap 是作用在全局的，所以我們要把scoped屬性刪除，讓這個style樣式作用在全局，這樣就ok啦！