踩坑日记(1)

场景：

vue单页面项目中, 引入element-ui, 使用其中的Backtop组件

---

问题描述：

按照官方文档示例引入到项目中, 代码如下:

<template>
  <div class="app">
    <app-top></app-top>
    <router-view></router-view>
    <el-backtop 
      target=".app"
     :bottom="100"
     :visibility-height="150"
    >
      <i class="el-icon-top"></i>
    </el-backtop>
  </div>
</template>

结果滚动的时候, 并不会出现返回按钮

---

原因分析：

       Backtop组件的target是类名为app的div, 该容器并没有发生滚动, 所以不会出现返回按钮;可是实际上页面发生滚动了???
       其实真正发生滚动的是该div的父容器, 项目中的直接父容器是body, 再往外一层是html

---

解决方案：

       .app及其所有父容器高度设置成100%; 同时.app设置overflow为auto

html,
body {
	height: 100%;
}
.app {
  	height: 100%;
  	overflow: auto;
}