elementui组件—— el-scroll的使用

最新推荐文章于 2025-03-13 14:59:12 发布

九乞阿大

最新推荐文章于 2025-03-13 14:59:12 发布

阅读量1.5w

点赞数 6

分类专栏： elementui 前端文章标签： elementui

本文链接：https://blog.csdn.net/Misko/article/details/100136327

版权

前端同时被 2 个专栏收录

14 篇文章

订阅专栏

elementui

8 篇文章

订阅专栏

本文详细介绍了ElementUI中Scroll组件的使用方法，包括如何解决浏览器滚动条与页面风格不匹配的问题，以及如何自定义组件样式和属性。适用于希望改善网页滚动体验的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目开发中使用到了elementui组件，后期发现浏览器中的滚动条不仅占宽，还与页面暗色风格不搭配。于是打算寻找一款插件使用，而elementui中的scroll组件刚好满足需要而且兼容ie10+。

官网侧边栏中scroll的使用截图

在这里插入图片描述

使用方法

直接在页面中调用el-scroll组件

<el-scrollbar style="height: 325px;width: 300px;">
      <!-- 具体要包裹的内容 --> 
      <div style="
		    width: 500px;
		    height: 370px;
		    line-height: 300px;
		    text-align: center;
		"> 占位</div>
</el-scrollbar>

在这里插入图片描述
页面内渲染出的dom结构可以看出，组件内总共有三块内容

最外层：el-scrollbar。使用时需要指定高度和宽度
第一块代码：el-scroll__wrap：
1).overflow:scroll是写在这里的，通过margin为负，将浏览器中的原始滚动条排除视觉内隐藏掉。
2).el-scroll__view包裹滚动区域
第二块代码：el-scroll__bar is-horizontal: 横向滚动条
第三块代码：el-scroll__bar is-vertical: 纵向滚动条

在这里插入图片描述

组件的自定义属性

根据官网的scroll组件源码，可以看到scroll组件是有几个属性可以传入的。具体使用可以自己研究下，主要就是传入自定义样式和class，注意自定义stlye接收的是数组类型。
在这里插入图片描述
举栗子：

 <el-scroll
  :view-class="'the-view-class'" 
  :wrap-style="[{height:'300px'},{width:'300px'}]"
  :wrap-class="'the-wrap-class'">
 </el-scroll>

在这里插入图片描述