瀏覽器默認的滾動條不太美觀而且在ie下不能調(diào)整樣式，在element-ui中有個隱藏的組件，在官網(wǎng)上是沒有對應的api的，那就是<el-scrollbar>，這個組件的滾動條比原生的還是好看些的。

開始使用

<el-scrollbar>
  // 包裹你的內(nèi)容
</el-scrollbar>

這個組件還有一個屬性值可以傳遞，可以用來修改樣式加一些class的類名，但是一般情況下不會用的太多。

props: {
  native: Boolean,
  wrapStyle: {}, // 外層盒子的樣式
  wrapClass: {}, // 外層盒子的class
  viewClass: {}, // 內(nèi)層盒子的class
  viewStyle: {}, // 內(nèi)層盒子的樣式
  noresize: Boolean, // 如果 container 尺寸不會發(fā)生變化，最好設置它可以優(yōu)化性能
  tag: {
    type: String,
    default: 'div'
  }
}

el-scrollbar將會作為你容器的最外層，也是滾動條的容器；
可以給el-scrollbar加上ref以及class來達到自己想要的結果。
特別需要注意的是：在el-scrollbar上定義maxHeight和maxWidth是不生效的，沒有辦法達到預期的一個效果

滾動到指定的位置

可以使用如下代碼

this.$refs['scroll'].wrap.scrollTop = 0  //想滾到哪個高度，就寫多少
或者
this.$refs.scroll.wrap.scrollTop = 0  //想滾到哪個高度，就寫多少
注意     .warp必須要加，否則不生效。

例子：滾動到頂部（有動畫效果）

<el-scrollbarl ref="scroll">
  // ...
</el-scrollbar>
<el-button @click="toTop">滾動到頂部</el-button>

<script>
const cubic = value => Math.pow(value, 3);
const easeInOutCubic = value => value < 0.5
  ? cubic(value * 2) / 2
  : 1 - cubic((1 - value) * 2) / 2;
//...
methods: {
  toTop() {
    // el-scrollbar 容器
    const el = this.$refs['scroll'].wrap;
    
    const beginTime = Date.now();
    const beginValue = el.scrollTop;
    const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
    const frameFunc = () => {
      const progress = (Date.now() - beginTime) / 500;
      if (progress < 1) {
        el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
        rAF(frameFunc);
      } else {
        el.scrollTop = 0;
      }
    };
    rAF(frameFunc);
  }
}
//...
</script>