组件el-scrollbar的使用示例详解
发布时间：2023-09-07 16:13:01 作者：丹丹的小跟班 
我要评论
我要评论这篇文章主要介绍了组件el-scrollbar的使用示例详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
对于elementui里面的scrollbar组件，一直没有一个清晰的使用方法，似乎每次使用需要的代码都不同，需要加各种乱七八糟的样式加穿透样式，今天自己测试了下，似乎并没有想象的复杂。
1.最简单的使用
<template>
<div>
<el-scrollbar>
<div class="box">
<ul>
<li v-for="item in 100">{{ item }}</li>
</ul>
</div>
</el-scrollbar>
</div>
</template>直接使用el-scrollbar的组件将你需要的有滚动条的内容包裹起来即可。这里必须设置里面盒子的固定高度（最好是设置最大高度），不然不会有效果！若内容长度不超出屏幕宽度，则不会出现横向滚动条。
.box {
max-height: 200px;
}效果展示
2.设置宽度
我们也可以直接设置el-scrollbar的组件宽度，这样超出宽度的时候自然就会出现横向滚动条。
注意是给
el-scrollbar组件设置宽度，而不是里面的内容设置。
此时可以直接给el-scrollbar组件添加class即可
<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>.box {
max-height: 200px;
}
.scrollbar {
width: 200px;
}
当宽度超出长度但是还不想显示滚动条时，添加以下样式即可
/deep/ .is-horizontal {
display: none;
}到此这篇关于组件el-scrollbar的使用的文章就介绍到这了,更多相关组件el-scrollbar使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了组件el-scrollbar的使用示例详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-07
本文主要介绍了CSS中滚动容器与固定Tabbar自适应的几种方法实现，主要介绍了三种方法，文中通过代码示例介绍的非常详细，感兴趣的可以了解一下2023-09-07- 这篇文章主要给大家介绍了使用CSS中的text-overflow属性来实现单行文本溢出显示省略号,文章中有详细的实现代码，感兴趣的同学可以自己动手尝试一下2023-09-07
本文主要介绍了CSS中图片旋转超出父元素解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2023-09-06
随着网站的发展,越来越多的网站开始采用折叠样式来提高页面的可访问性和可读性，本文主要介绍了纯CSS杂志封面折叠效果，分享给大家，感兴趣的可以了解一下2023-09-05- 这篇文章主要介绍了CSS 中的position属性实例详解,定位属性position有4个值，分别是静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）2023-09-04
在本文中，我们将探索 CSS Grid repeat() 函数的所有可能性，它允许我们高效地创建 Grid 列和行的模式，甚至无需媒体查询就可以创建响应式布局,需要的朋友可以参考下2023-09-01- 在网页设计中有时会设置某个DIV或者TABLE的高度自适应，即元素的高度充满父元素的高度,一般使用设置CSS height:100%来实现，本文主要介绍了css中div盒子height:100%高度无2023-08-29
本文介绍了如何巧妙的利用 CSS 中的各种高阶技巧，组合实现类似于碰撞场景的动画效果,创建出了非常有趣的 CSS 动画，期间各种技巧的组合运用，对使用CSS实现碰撞检测效果实2023-08-24
这篇文章主要介绍了CSS实现一个交互感不错的卡片列表,涉及到知识块本文结合实例代码给大家讲解的非常详细，需要的朋友可以参考下2023-08-24
最新评论