解决ElementUI的el-backtop无效的问题

错误用法示例

1. 直接拷贝了elementui的示例代码，添加了bottom和visibility-height属性

2. 控制台报错Error in mounted hook: "Error: target is not existed: .page-component__scroll .el-scrollbar__wrap"

解决方法1

去掉target，直接使用el-backtop

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
    <el-backtop :bottom="100" :visibility-height="50"></el-backtop>
  </div>
</template>

示例1

解决方法2

1. 在el-backtop外层的div上加class="page-component__scroll"，名称为target中的第一个class，这个可以自己设置类名，只要两者对应即可

2. 在滚动区域的外侧设置el-scrollbar

3. 设置style样式高度，隐藏左右滚动条，保留上下滚动条

<template>
  <div id="app" class="page-component__scroll">
    <el-scrollbar class="scrollbar">
      <div id="nav" class="nav-class">
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>
      </div>
      <router-view />
    </el-scrollbar>
    <el-backtop
      target=".page-component__scroll .el-scrollbar__wrap"
      :bottom="100"
      :visibility-height="50"
    ></el-backtop>
  </div>
</template>

<style lang="scss" scoped>
.scrollbar {
  height: calc(100vh - 60px);
}
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>

示例2