Web前端篇——ElementUI的Backtop 不显示问题

在使用ElementUI的Backtop回到顶部组件时,单独复制这一行代码

复制代码
<el-backtop :right="100" :bottom="100" />

发现页面在向下滚动时,并未出现Backtop组件。

可从以下3个方向进行分析:

  1. 指定target属性,且一定要指向产生滚动条的组件。
  2. <el-backtop></el-backtop>一定要写于最外层块级区域的第一行,不可写于代码末尾。
  3. 要滚动的区域不能设置overflow: hidden,否则无法显示。如果你怀疑全局css设置了overflow: hidden,那么你可以在你要滚动的区域上添加样式overflow: auto进行覆盖。

以下为示例代码:

html 复制代码
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>About</title>
  </head>
  <body>

    <div id="app" class="main_container" style="height:100%;overflow: auto;">
      <el-backtop target=".main_container"></el-backtop>  <!--  Backtop组件 -->
      <!-- 其余代码 -->
      <div class="container">
        <div style="height: 2400px;"></div>
      </div>
      <div style="height: 2400px;"></div>
    </div>
    
    <script>
      const App = {
        data() {
          return {
            
          };
        },
        methods: {
          
        }
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>
相关推荐
江城开朗的豌豆几秒前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er7 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子8 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆12 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山21 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45330 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^31 分钟前
条件渲染 v-show与v-if
前端
棉花糖超人38 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
小小小小宇8 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊8 小时前
Python之--基本知识
开发语言·前端·python