vue element 滚动条 横向隐藏

<template>
  <div>
    <div class="box">
      <el-scrollbar>
        <p>刚好项目里面一直在使用的都是element</p>
        <p>因为原生的滚动条太丑了</p>
        <p>发现elementui中有个隐藏的组件</p>
        <p>优化滚动条样式</p>
        <p>亲测可用</p>
      </el-scrollbar>
    </div>
  </div>
</template>
<style>
  .box {
    width: 200px;
    height: 100px;
    background: aliceblue;
    white-space: nowrap;
  }
  .el-scrollbar {
    height: 100%;
  }
  .box  .el-scrollbar__wrap {
    overflow: scroll;
    width: 110%;
    height: 120%;
  }
</style>

方法二（有效）：

<el-scrollbar style="height:100%;" wrap-class="default-scrollbar__wrap">
  <div v-for="o in child.planItems" class="text-item">
    {{o.name}}
  </div>
</el-scrollbar>

<style>

  .default-scrollbar__wrap {
    overflow-x: hidden;
  }