踩坑日记(1)

最新推荐文章于 2024-07-17 08:37:25 发布

原创最新推荐文章于 2024-07-17 08:37:25 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

踩坑日记专栏收录该内容

10 篇文章

订阅专栏

本文记录了在Vue开发中遇到的一个具体问题，从场景描述到问题的现象，再到深入的原因分析，最后详细阐述了解决该问题的步骤和方法，为类似问题的解决提供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：

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