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

最新推荐文章于 2025-09-24 13:08:38 发布

原创最新推荐文章于 2025-09-24 13:08:38 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue.js #css

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

使用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);
    }
  }
}