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

想喝可乐的levi

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

阅读量3k

点赞数 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

2241

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

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

;

02-10

4895

一、安装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...

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

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

u011391361的博客

01-03

2386

ElementUI的Backtop 不显示问题

el-backtop置顶功能报错和页面不展示问题

最新发布

miem_yang的博客

12-03

171

根据官网例子直接使用发现页面并没有反应，而且可能还会遇到报错的问题。

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

weixin_54930261的博客

12-30

5503

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

el-backtop不显示的问题

monongLY的博客

01-09

657

el-backtop不显示的问题

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

weixin_44277937的博客

07-06

880

将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

1814

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

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

m0_51221102的博客

09-21

6250

代码：以下是在旧版本中可行的导入方式，但是在最新版本会报找不到模块的错误 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`组件不生效的...

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

Jesus_z的博客

03-02

5832

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

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

weixin_42598278的博客

02-12

181

如果在Element UI中的backtop组件上设置了overflow: auto，那么backtop就不会生效。这是因为overflow: auto会导致元素的溢出内容被修剪，并且可以通过滚动条查看。因此，如果backtop组件的位置在已修剪的内容中，它将不可见，并且不会起作用。为了解决这个问题，你需要在backtop组件上添加一个position：fixed属性，使其始终位于视图中。 ...

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

yemuxia_sinian的博客

03-25

3489

其实主要问题在于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

5993

<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

6913

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

elementPlus——backtop 使用无效问题

qq_52065282的博客

06-27

438

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

解决vue3中使用el-backtop 无效

欢迎来到我的小世界

03-03

1424

解决vue3中使用el-backtop 无效

Element-ui 回到顶部组件不显示问题解决

chenjun1992的博客

06-06

2807

Element-ui官网自定义回到顶部插件内容如下，但是复制到自己的代码里没有显示。 <template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100"> <div style="{ height: 100%; width

element-ui 之组件BackToTop 怎么实现不滚动到可视区就显示

10-15

Element UI 的 `BackToTop` 组件通常用于页面顶部导航栏中，当用户滚动到底部时，提供一个便捷的方式返回页面顶部。默认情况下，`BackToTop` 会在页面滚动到一定高度（如文档高度的80%）时开始隐藏和显示。如果你想要它在不完全滚出可视区域时就开始显示，你可以自定义它的行为。在 Element UI 中，`BackToTop` 的显示和隐藏是由其内部的 `showEvent` 和 `hideEvent` 触发器控制的。你可以通过修改这两个属性来自定义行为。下面是一个简化的示例： ```javascript <el-backtop :bottom="false" :distance="50" @show="onShow" @hide=" onHide"></el-backtop> ``` 这里： - `bottom` 属性设为 `false` 表示不在底部显示，默认是 `true`。 - `distance` 属性设置一个较小的数值，比如 `50`，表示滚动距离达到这个值时就显示组件，这比默认的 `90vh` 更早。 - `@show` 和 `@hide` 是事件监听器，你可以在其中添加相应的处理函数，例如 `onShow()` 和 `onHide()` 来进一步控制展示行为。如果你需要更复杂的交互，可以结合计算滚动位置的 JavaScript 逻辑，例如使用 `window.scrollY` 或者 `element.getBoundingClientRect().top` 等方法。