常用demo：element-ui滚动条element-ui滚动条 el-scfrollbar组件 demo 相关样式调

css

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
      .content p{
        padding: 0;
        margin: 0;
      }
      /* 画布宽度 */
      .parent{
        width: 100px;

      }
      /* 画布高度 */
      .el-scrollbar__view{
        height: 200px;

      }
      /* 内容 */
      .content{
        height:300%;
        width:200%;
      }
      /* 移除浏览器自带滚动条 */
      .first::-webkit-scrollbar{
        width: 0;
      }
      /* 滚动条颜色 */
      .el-scrollbar__thumb{
        background-color: turquoise;
      }
    </style>

html

<body>
<!-- 1.滚动条的位置紧贴el-scrollbar标签的父节点parent决定 -->
<!-- 2.画布的 宽度 由el-scrollbar标签的父节点 parent 决定 -->
<!-- 3.画布的 高度 由el-scrollbar标签的子节点 content 决定 -->
    <div id="app_container">
        <div class="parent">
          <el-scrollbar>
            <div class="content">
              {{msg}}
            </div>
          </el-scrollbar>
        </div>
    </div>

</body>

js

<script src="../js/vue.js" ></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  const myvue = new Vue({
    el:'#app_container',
    data:{
        msg:'hello world'
      }
    
  })
</script>