Element-ui 滚动条美化的实现

<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.13/lib/index.js"></script>
<div id="app">
  <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
  <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
    <el-scrollbar class="test">
      <div>这是一段信息</div>
      <div>这是一段信息</div>
      <div>这是一段信息</div>
      <div>这是一段信息</div>
      <div>这是一段信息</div>
      <div>这是一段信息</div>
      <div>这是一段信息</div>
      <div>这是一段信息</div>
    </el-scrollbar>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</div>
<style>
  .test {
    height: 100px;
  }
  .el-scrollbar__wrap{
    overflow-x: hidden;
  }
</style>

 props: {
    native: Boolean, // 是否使用原生方式
    wrapStyle: {},  // 包裹容器的自定义样式
    wrapClass: {},  // 包裹容器的自定义类名
    viewClass: {},  // 视图的自定义样式
    viewStyle: {},  // 视图的自定义类名
    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
    tag: {              // 视图的元素标签，默认为 div 标签
      type: String,
      default: 'div'
    }
  },

<template>
  <el-scrollbar height="400px">
    <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
  </el-scrollbar>
</template>
<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>

.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}

// Create the measurement nodevar scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);
// Get the scrollbar widthvar scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.warn(scrollbarWidth); // Mac:  15
// Delete the DIV 
document.body.removeChild(scrollDiv);