element el-scrollbar

最新推荐文章于 2025-05-18 15:44:03 发布

转载最新推荐文章于 2025-05-18 15:44:03 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_43216105/article/details/89520534

文章标签：

#elementui #el-scrollbar #vue

element 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Element UI中的隐藏滚动条组件来美化网页滚动效果，提供了一个HTML示例和CSS代码，亲测适用于项目开发。

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

1）html

<div class="box">
      <el-scrollbar>
        <p>刚好项目里面一直在使用的都是element</p>
        <p>因为原生的滚动条太丑了</p>
        <p>发现elementui中有个隐藏的组件</p>
        <p>优化滚动条样式</p>
        <p>亲测可用</p>
      </el-scrollbar>
    </div>

2）css

<style scoped>
.box {
  width: 500px;
  height: 100px;
  background: aliceblue;
  white-space: nowrap;
}
.box >>> .el-scrollbar {
  height: 100%;
}
.box >>> .el-scrollbar__wrap {
  overflow: scroll;
  width: 110%;
  height: 120%;
}
</style>