[BUG记录] Element Plus 的 Backtop 组件未生效

项目场景:

vue@3.2.37 & element-plus@2.2.17


问题描述

vue项目,页面使用了 Element Plus 的 Scrollbar 组件包裹。在页面内引入 Backtop 组件,未随着页面滚动生效


原因分析:

分析是 Scrollbar 组件的滚动未触发 Backtop 组件,即,Backtop 组件未正确监听到触发滚动的对象


解决方案:

Backtop 组件提供了 target 属性,指定触发滚动的对象。

Element Plus 的 Scrollbar 组件包裹容器的类为 el-scrollbar__wrap,为了避免官方变更类名或者同其它 Scrollbar 组件混淆,可以使用该组件提供的 wrap-class 属性自定义一个类名

<section class="app-main">
  <el-scrollbar wrap-class="app-main-scroll-wrap">
    <div class="container">
      <!-- page content -->
      <!-- ... -->
      <!-- <el-backtop target=".app-main .el-scrollbar__wrap" /> -->
      <el-backtop target=".app-main-scroll-wrap" />
    </div>
  </el-scrollbar>
</section>
经验分享 程序员 微信小程序 职场和发展