element ui中¶Backtop 回到顶部页面没效果

175 阅读1分钟
回到顶部功能,先是参考element 官网,复制代码
<template> 
    Scroll down to see the bottom-right button. 
    <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> 
</template>
发现不起作用。网上有人说是必须在最外层标签,不太对。经研究发现是因为此组件必须在el-scrollbar组件内使用,target指向.el-scrollbar__wrap。
代码如下:
 <!-- 某个组件 -->
<template>
  <div class="test-page">
    <el-scrollbar style="height:100%;" wrap-style="overflow-x:hidden;">
      滚动测试
      <div class="mask" />
      <el-backtop target=".el-scrollbar__wrap" :bottom="100" />
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style scoped lang="scss">
.test-page {
  height: 100%;
}
.mask {
  height: 1500px;
}
</style>