el-backtop不显示的问题

最新推荐文章于 2025-09-02 14:35:58 发布
原创 最新推荐文章于 2025-09-02 14:35:58 发布 · 772 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文讲述了在使用ElementUI的el-scrollbar组件时遇到不显示问题，通过在el-backtop标签中增加target属性值.el-scrollbar__wrap解决了这一问题，提到了具体的bottom和right属性配置。

我这边是在el-scrollbar里面不显示

解决方法是在el-backtop 标签中增加 target=".el-scrollbar__wrap"
<el-scrollbar>
  <!-- 一些其他代码 -->
  <el-backtop target=".el-scrollbar__wrap" :right="20" :bottom="10" />
</el-scrollbar>
manonglanye
关注
Web前端篇——ElementUI的Backtop 不显示问题
u011391361的博客
01-03 2884
ElementUI的Backtop 不显示问题
使用el-scrollbar组件时el-backtop不生效
jugt的博客
12-12 563
使用el-scrollbar时，el-backtop不生效，需要el-scrollbar增加 wrap-class属性，，然后，el-backtop使用target绑定wrap-class。
el-backtop置顶功能报错和页面不展示问题
miem_yang的博客
12-03 580
根据官网例子直接使用发现页面并没有反应，而且可能还会遇到报错的问题。
解决el-backtop组件无效问题
最新发布
Yr123456_的博客
09-02 191
解决el-backtop组件无效问题
关于element-ui backtop 不生效，无显示
levi2469的博客
01-11 3191
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"></el-backtop> </template> target：指向需要
elementUI的el-backtop(返回顶部)不生效
weixin_54930261的博客
12-30 5724
这个是基础用法，自定义用法跟这个也差不多，就是中间加了些样式。看起来这个例子很简单对不对，按照最简单的原则拿过来就用，Ctrl+C到自己项目后就等着出现回到顶部按钮，结果实际结果却令我大失所望，直接报错了。，心想这下子应该是可以了吧。结果运行的时候错误是没有了，但是那个心心念念的回到顶部按钮怎么都出现不了，难道是我姿势不对？目前我采用的方法是简单粗暴的删除target不指定对象， 也是能显现按钮，并且回到顶部。既然给出了原因，那解决应该很简单，不是找不到这个样式吗，那我就在外层套个。的功能的时候遇到坑了。
el-backtop不起作用的解决办法
wmklalala的博客
02-16 7018
插入官网上的代码发现不起作用还会报错 <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> 更改为以下代码即可 <el-backtop></el-backtop> ...
el-backtop可以设置一直显示吗
08-16
### 如何设置 `el-backtop` 组件始终显示 `el-backtop` 是 Element UI 提供的一个返回顶部按钮组件，默认情况下，它会在页面滚动到一定位置后才显示。若需实现该按钮始终显示在页面上，可以通过设置 `:visibility-...
el-backtop在页面不显示本来的区域有滚动条又多了一个
06-17
我的回答应该：1.**介绍问题**：解释el-backtop显示异常的常见原因。2.**逐步解决**：-检查滚动条位置：确定滚动条在body还是自定义容器。-设置target属性：如果滚动在自定义容器，设置target为那个容器的类或ID。-...
el-backtop如何使用
04-26
否则，默认情况下不需要，这样就能避免组件不显示的问题。 另外，用户可能需要知道如何自定义按钮的样式，比如替换图标、调整位置和样式。引用[4]中的例子展示了如何在el-backtop内部添加div来自定义样式，同时使用...
Vue 2 Element UI 的 el-backtop
06-25
在这个示例中，当用户向下滚动页面时，`el-backtop` 按钮会自动显示。点击该按钮后，页面将平滑滚动回顶部 [^2]。 --- ### 常见问题及解决方案 #### 1. **target 属性的使用** 如果页面滚动发生在某个特定容器内...
Element-ui el-backtop不起作用的解决办法
yemuxia_sinian的博客
03-25 3930
其实主要问题在于target的设置，一开始看文档也是不清楚这个属性要怎么设置，有两种情况： 1、如果滚动条是整个document自身的那么此时target不用设置，如下即可： <template> Scroll down to see the bottom-right button. <el-backtop></el-backtop> </template> 2、如果此时页面的滚动条设置在了某个dom节点上（某个dom节点设置了overflow
解决vue3中使用el-backtop 无效
欢迎来到我的小世界
03-03 1514
解决vue3中使用el-backtop 无效
Element-ui 回到顶部组件不显示问题解决
chenjun1992的博客
06-06 2955
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
[BUG记录] Element Plus 的 Backtop 组件未生效
ymzhao
06-14 2011
vue项目，页面使用了 Element Plus 的 Scrollbar 组件包裹。在页面内引入 Backtop 组件，未随着页面滚动生效
antd BackTop回到顶部 a-back-top回到顶部组件使用，a-back-top不显示，a-back-top无效问题
weixin_47602884的博客
09-15 2124
因为默认的是window，所以我们往往需要改变target的指向。有一天我需要用到 a-back-top回到顶部组件，在引用至页面中，发现无论何时都没有生效，就小小组件花了我中午宝贵的40分钟休息时间才弄好！1、target 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数。滚动高度达到此参数值才出现 ，而你的滚动还不到，所以可以把这个数据重新设置小点。2、 当第一步实现了，有可能你的页面上咋滚都没出现回到顶部那个按钮，这是因为你的。3、 放在任何地方都行，因为他。
Backtop 回到顶部失效? 手搓回到顶部按钮【基于vue自定义】
General_D的博客
05-21 2215
解决elemnt-ui的Backtop组件失效问题，两种方法帮你解决小烦恼~ 基于vue自定义一个回到顶部按钮，包含超视距显示、视距内隐藏、一键回到顶部，诸多丝滑小妙招等你来撩，阿巴阿巴~
使用 element ui官网 回到顶部不显示问题解决
qq_44803640的博客
05-30 1113
官网使用element ui 回到顶部解决使用之前（这种情况下根本不显示效果）修改之后完结 使用element ui 的回到顶部插件的时候出现不显示，功能不能使用的情况下写出这篇文章， 使用之前（这种情况下根本不显示效果） <template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="10
vue elementUI回到顶部组件无法显示问题
weixin_44277937的博客
07-06 955
将elementUI官方的回到顶部组件代码复制过去不显示,困扰了很久 最后发现将这块给去掉就可以显示了 target=".page-component__scroll .el-scrollbar__wrap" <el-backtop :bottom="100"> <div style="{ height: 100%; width: 100%; background-color: #f2
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值