el-scrollbar-test

el-scrollbar 简单实用。

by Theara Yuom

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <h2>list:</h2>
  <el-scrollbar wrap-class="list" wrap-style="color: red;" view-style="font-weight: bold;" view-class="view-box" :native="false">
    <div v-for="value in num" :key="vlaue">
      {{value}}
    </div>
  </el-scrollbar>
</div>

CSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
#app {
  height: 300px;
  overflow: hidden;
}

/*展示列表的区域，超过200px出现滚动条*/

.list {
  max-height: 200px;
}

JavaScript

new Vue({
  el: "#app",
  data: {
    num: 30
  }
})