本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > css >

收藏
分享到

组件el-scrollbar的使用实例介绍

css 来源：互联网 作者：佚名 发布时间：2023-09-11 22:59:02 人浏览
摘要

对于elementui里面的scrollbar组件，一直没有一个清晰的使用方法，似乎每次使用需要的代码都不同，需要加各种乱七八糟的样式加穿透样式，今天自己测试了下，似乎并没有想象的复杂。

对于elementui里面的scrollbar组件，一直没有一个清晰的使用方法，似乎每次使用需要的代码都不同，需要加各种乱七八糟的样式加穿透样式，今天自己测试了下，似乎并没有想象的复杂。

1.最简单的使用

1

2

3

4

5

6

7

8

9

10

11

<template>

  <div>

    <el-scrollbar>

      <div class="box">

        <ul>

          <li v-for="item in 100">{{ item }}</li>

        </ul>

      </div>

    </el-scrollbar>

  </div>

</template>

直接使用el-scrollbar的组件将你需要的有滚动条的内容包裹起来即可。这里必须设置里面盒子的固定高度（最好是设置最大高度），不然不会有效果！若内容长度不超出屏幕宽度，则不会出现横向滚动条。

1

2

3

.box {

  max-height: 200px;

}

效果展示

2.设置宽度

我们也可以直接设置el-scrollbar的组件宽度，这样超出宽度的时候自然就会出现横向滚动条。

注意是给el-scrollbar组件设置宽度，而不是里面的内容设置。

此时可以直接给el-scrollbar组件添加class即可

1

2

3

4

5

6

7

8

9

10

11

<template>

  <div>

    <el-scrollbar class="scrollbar">

      <div class="box">

        <ul>

          <li v-for="item in 100">{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}{{ item }}</li>

        </ul>

      </div>

    </el-scrollbar>

  </div>

</template>

1

2

3

4

5

6

.box {

  max-height: 200px;

}

.scrollbar {

  width: 200px;

}

当宽度超出长度但是还不想显示滚动条时，添加以下样式即可

1

2

3

/deep/ .is-horizontal {

  display: none;

}

版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计