使用ElementUi解决滚动条占位问题

最新推荐文章于 2025-05-15 10:31:56 发布

H.zq

最新推荐文章于 2025-05-15 10:31:56 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： html vue.js css

本文链接：https://blog.youkuaiyun.com/weixin_44968219/article/details/123799988

本文介绍如何通过el-scrollbar组件结合transition标签来实现页面中需要滚动效果的DOM元素的平滑过渡。具体实现了带有过渡动画的滚动条，并对滚动条的样式进行了定制。

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

使用el-scrollbar结合transition标签包裹需要滚动的dom

<section class="app-main ">
    <el-scrollbar class="app_scrollbar">
      <transition name="fade-transform" mode="out-in">
        <keep-alive :include="cachedViews">
          <router-view :key="key" />
        </keep-alive>
      </transition>
    </el-scrollbar>
  </section>

//滚动条
/deep/.app_scrollbar {
  height: 100%;
  & > .el-scrollbar__wrap {
    overflow-x: hidden;
    overflow-y: scroll;
    & > .el-scrollbar__view {
      min-height: 100%;
      padding: 0 20px 20px;
    }
  }
  & > .el-scrollbar__bar.is-vertical {
    width: 4px;
    right: 0;
    z-index: 4;
    .el-scrollbar__thumb {
      background: rgba(0, 0, 0, 0.2);
    }
    .el-scrollbar__thumb:hover {
      background: rgba(0, 0, 0, 0.2);
    }
  }
}