关于element-ui backtop 不生效，无显示

想喝可乐的levi

已于 2022-02-03 12:32:25 修改

阅读量2.9k

点赞数 2

文章标签： ui vue.js 前端

于 2022-01-11 12:30:44 首次发布

本文链接：https://blog.csdn.net/levi2469/article/details/122429346

版权

本文探讨了在Element-UI中遇到Backtop返回顶部按钮不生效和无显示的问题。首先，介绍了无需使用target属性也能使Backtop组件工作的方案，然后详细讲解了当使用target属性时，如何正确指定需要滚动的组件，尤其是该组件必须存在滚动条的条件。通过这两点，帮助开发者解决相关问题。

摘要由CSDN通过智能技术生成

1、不用target属性也可以使用

<el-backtop></el-backtop>

2、用target属性

<template>
  Scroll down to see the bottom-right button.
  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"><

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

想喝可乐的levi

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue+element-ui backtop组件使用

qq_35117063的博客

12-17

2213

element-ui中的backtop返回顶部组件的使用最近写的项目中用到了vue和element-ui实现前端页面，在最后写到返回顶部的时候，看到有自带的组件就直接使用了，但是在copy代码进去之后发现没生效。找了不少文章，有些是直接copy了官方的文档，有的是给出了解决方案，但是没有说明，有点看不懂到底要怎么弄。最后的最后，我差点就自己写原生。最终因为懒就没有自己写。所以我仔细观察...

vue-cli3 同时按需引入vant和element ui

;

02-10

4872

一、安装vant和element ui 1.安装vant # 通过 npm 安装 npm i vant -S # 通过 yarn 安装 yarn add vant 2.安装element ui npm i element-ui -S 二、配置按需引入插件 1.vant npm i babel-plugin-import -D 2.element ui npm insta...

参与评论您还未登录，请先登录后发表或查看评论

elementUI的el-backtop(返回顶部)不生效

weixin_54930261的博客

12-30

5355

这个是基础用法，自定义用法跟这个也差不多，就是中间加了些样式。看起来这个例子很简单对不对，按照最简单的原则拿过来就用，Ctrl+C到自己项目后就等着出现回到顶部按钮，结果实际结果却令我大失所望，直接报错了。，心想这下子应该是可以了吧。结果运行的时候错误是没有了，但是那个心心念念的回到顶部按钮怎么都出现不了，难道是我姿势不对？目前我采用的方法是简单粗暴的删除target不指定对象，也是能显现按钮，并且回到顶部。既然给出了原因，那解决应该很简单，不是找不到这个样式吗，那我就在外层套个。的功能的时候遇到坑了。

VUE 解决el-backtop无效问题

最新发布

weixin_44093889的博客

08-15

473

组件的el-backtop组件，但是使用之后没有效果。当然如果问题已经解决，那么恭喜你；项目需要实现回到顶部功能，使用。将backtop组件放在滚动容器里的第一个。我移动到最前面依然无效。查看滚动容器的css样式，设置高度以及滚动。

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

u011391361的博客

01-03

2090

ElementUI的Backtop 不显示问题

el-backtop不显示的问题

monongLY的博客

01-09

610

el-backtop不显示的问题

vue elementUI回到顶部组件无法显示问题

weixin_44277937的博客

07-06

858

将elementUI官方的回到顶部组件代码复制过去不显示,困扰了很久最后发现将这块给去掉就可以显示了 target=".page-component__scroll .el-scrollbar__wrap" <el-backtop :bottom="100"> <div style="{ height: 100%; width: 100%; background-color: #f2

[BUG记录] Element Plus 的 Backtop 组件未生效

ymzhao

06-14

1766

vue项目，页面使用了 Element Plus 的 Scrollbar 组件包裹。在页面内引入 Backtop 组件，未随着页面滚动生效

Element UI中的BackTop无法使用的解决方案

Jesus_z的博客

03-02

5784

问题描述最近在写个人博客时使用elementUI来作为前端框架，但是当我使用到BackTop时发现无法使用的现象。具体表现为：滚动页面后该返回顶部按钮组件并没有出现。 ElementUI官网文档：https://element.eleme.cn/#/zh-CN/component/backtop 问题分析在查阅了大量文章后，发现该组件的实用方式很简单，直接引入即可，如下图是最简单的...

新版本element-plus导入时错误：These dependencies were not found

m0_51221102的博客

09-21

6181

代码：以下是在旧版本中可行的导入方式，但是在最新版本会报找不到模块的错误 import "element-plus/src/theme-chalk/base.css" import { ElButton } from "element-plus/lib" 错误： These dependencies were not found: * element-plus/lib/el-button in ./src/global/register-element.ts * element-plus/theme-

设置overflow：auto后，elementui的backtop不生效

08-14

而Element UI中的`Backtop`组件是用来实现返回页面顶部功能的，通常会设置一个目标元素，当滚动到目标元素时显示返回顶部按钮。但是当目标元素的父元素设置了`overflow：auto`时，可能会导致`Backtop`组件不生效的...

设置overflow auto后，elementui的backtop不生效

02-13

如果在Element UI中的backtop组件上设置了overflow: auto，那么backtop就不会生效。这是因为overflow: auto会导致元素的溢出内容被修剪，并且可以通过滚动条查看。因此，如果backtop组件的位置在已修剪的内容中，它...

怎样修改element ui源码，使得可以控制backtop组件滚动时长

07-17

要修改Element UI源码，以便控制Backtop组件的滚动时长，可以按照以下步骤进行： 1. 克隆Element UI的源码仓库到本地。可以在GitHub上找到Element UI的仓库，并使用git命令或其他工具将其克隆到本地。 2. 进入克隆...

Element-ui el-backtop不起作用的解决办法

yemuxia_sinian的博客

03-25

3319

其实主要问题在于target的设置，一开始看文档也是不清楚这个属性要怎么设置，有两种情况： 1、如果滚动条是整个document自身的那么此时target不用设置，如下即可： <template> Scroll down to see the bottom-right button. <el-backtop></el-backtop> </template> 2、如果此时页面的滚动条设置在了某个dom节点上（某个dom节点设置了overflow

为什么element的el-backtop会不管用，来看这里

GeniusXYT的博客

05-23

5923

<template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> </template> 把target指向你要产生“回到顶部”按钮的组件，这个组件一定要是产生滚动条的组件！这个组件一定要是产生滚动条的组件！这个组件一定要是产生滚动条的组件！举

el-backtop不起作用的解决办法

wmklalala的博客

02-16

6895

插入官网上的代码发现不起作用还会报错 <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> 更改为以下代码即可 <el-backtop></el-backtop> ...

elementPlus——backtop 使用无效问题

qq_52065282的博客

06-27

404

没写target就出现了backtop不生效问题，加上target属性后就可以了。

关于element-ui el-backtop返回顶部组件无效问题

a5252145的博客

12-18

6767

关于element-ui el-backtop返回顶部组件无效问题 el-backtop绑定的盒子，需要一个滚动样式：overflow-y: scroll; <template> <div id="app"> <router-view /> // 绑定app盒子 <el-backtop target="#app" :vis...

解决vue3中使用el-backtop 无效

欢迎来到我的小世界

03-03

1383

解决vue3中使用el-backtop 无效