element ui 之 el-scrollbar应用

最新推荐文章于 2025-10-17 14:08:34 发布

转载最新推荐文章于 2025-10-17 14:08:34 发布 · 2.5k 阅读

UI 专栏收录该内容

28 篇文章

订阅专栏

本文详细解析了Element UI中滚动条组件的native属性使用方法，通过实例展示了如何控制是否显示原生滚动条，而非Element UI模拟的滚动条。代码示例包括HTML、CSS和JavaScript部分，展示了如何设置滚动条样式。

native属性：如果为true就不显示el的bar，也就是el模拟出来的滚动条，如果为false就显示模拟的滚动条

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.3.9/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/element-ui@2.3.9/lib/theme-chalk/index.css");
#app {
  height: 300px;
  overflow: hidden;
}
/*展示列表的区域，超过200px出现滚动条*/
.list {
  max-height: 200px;
}


JavaScript

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