踩坑日記(1)

nhq2019發表於2020-12-15

場景：

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;
}

相關文章