使用el-scrollbar组件时el-backtop不生效

于 2024-12-12 09:23:15 发布
阅读量463 收藏 1
点赞数 3
分类专栏： Html Element Plus 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jugtba/article/details/144416223
版权

使用el-scrollbar时，el-backtop不生效，需要el-scrollbar增加 wrap-class属性，，然后，el-backtop使用target绑定wrap-class

<el-main class="layout-main">
	<!-- 使用scrollbar时，el-backtop不生效，需要增加 wrap-class属性 -->
	<el-scrollbar wrap-class="app-main-scroll-wrap">
		<Main />
	</el-scrollbar>
</el-main>

<el-backtop  target=".app-main-scroll-wrap" />
关于element-ui backtop 不生效，无显示
levi2469的博客
01-11 3132
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：指向需要
Web前端篇——ElementUI之el-scrollbar + el-backtop + el-timeline实现时间轴触底刷新和一键返回页面顶部
u011391361的博客
01-04 2605
ElementUI之el-scrollbar + el-backtop + el-timeline实现时间轴触底刷新和一键返回页面顶部
elementUI的el-backtop(返回顶部)不生效
weixin_54930261的博客
12-30 5594
这个是基础用法，自定义用法跟这个也差不多，就是中间加了些样式。看起来这个例子很简单对不对，按照最简单的原则拿过来就用，Ctrl+C到自己项目后就等着出现回到顶部按钮，结果实际结果却令我大失所望，直接报错了。，心想这下子应该是可以了吧。结果运行的时候错误是没有了，但是那个心心念念的回到顶部按钮怎么都出现不了，难道是我姿势不对？目前我采用的方法是简单粗暴的删除target不指定对象， 也是能显现按钮，并且回到顶部。既然给出了原因，那解决应该很简单，不是找不到这个样式吗，那我就在外层套个。的功能的时候遇到坑了。
el-scrollbar滚动条不显示
m0_50923870的博客
08-22 2060
出现这样情况的主要原因为，页面开始渲染时内容并没有撑开el-scrollbar内容，所以不会显示滚动条。解决方法为使用其内置的update()方法 更改内容后对scrollbar进行更新。滚动条就可以正常显示了。动态添加标签发现滚动条不能正常显示，但是标签可以滚动。
el-backtop不起作用的解决办法
wmklalala的博客
02-16 6955
插入官网上的代码发现不起作用还会报错 <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> 更改为以下代码即可 <el-backtop></el-backtop> ...
VUE 解决el-backtop无效问题
weixin_44093889的博客
08-15 710
组件的el-backtop组件，但是使用之后没有效果。当然如果问题已经解决，那么恭喜你；项目需要实现回到顶部功能，使用。将backtop组件放在滚动容器里的第一个。我移动到最前面依然无效。查看滚动容器的css样式，设置高度以及滚动。
关于element-ui的隐藏组件el-scrollbar的使用
10-16
使用el-scrollbar组件时，主要目的是为内容区域添加自定义滚动条，这在网页布局中尤其有用，比如当内容区域高度超出视窗高度时，提供一个滚动条让用户体验更加友好。在一些定制化页面设计中，可能需要隐藏原生滚动条...
解决vue3中使用el-backtop 无效
欢迎来到我的小世界
03-03 1457
解决vue3中使用el-backtop 无效
el-scrollbar修改滚动条不生效
最新发布
人生小满胜万全 任何时候 别为难自己
08-30 620
想要修改el-scrollbar样式 搜了一圈发现基本上都是这样的 但是我用居然不生效。这个时候可以加个穿透试试::v-deep。
element 解决 Error: target is not existed: .page-component__scroll .el-scrollbar__wrap
qq_35770559的博客
11-06 9272
element 解决 Error: target is not existed: .page-component__scroll .el-scrollbar__wrap 初次使用element的Backtop 回到顶部组件的伙伴们，把官网代码复制到页面使用时难免会遇到这个问题： 大概意思是 .page-component__scroll 和 .el-scrollbar__wrap这两个目标不存在，接下来我们再来看看官网的文档介绍: 例子这里的target触发滚动的对象，应该是对应触发滚动class,看看控
el-scrollbar 异步请求后导致滚动无效
陈熙之的博客
05-18 1362
原本直接读取data里的数据，一切正常，当异步之后，滚动条没有了 <el-scrollbar ref="scrollDiv"> <ul class="fwprod-total clearfix" ref="fwAll" :style="{width:allWidth + 'px'}"> <li class="fwprod-total-item" v-for="(item,index) in fwtotal" :key="index" :styl
使用el-popconfirm和el-backtop不生效
ZMJ_QQ的博客
12-02 1968
1、使用el-popconfirm点击确定按钮不生效 不同版本使用的事件名称不一样，查看一下自己安装的element ui的版本，再查看对应版本的文档。 2.13.2版本使用的是 onConfirm 和onCancel ，官方文档地址Element - The world's most popular Vue UI framework 2.15.7版本使用的是 confirm 和cancel ，官方文档地址Element - The world's most popular Vue U...
为什么element的el-backtop会不管用，来看这里
GeniusXYT的博客
05-23 6057
<template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> </template> 把target指向你要产生“回到顶部”按钮的组件， 这个组件一定要是产生滚动条的组件！ 这个组件一定要是产生滚动条的组件！ 这个组件一定要是产生滚动条的组件！ 举
el-scrollbar搭配el-backtop滚动到最顶/最底 & el-scrollbar在focus时出现黑框的解决办法
rolling_kitten的博客
08-19 436
如题，当鼠标单击被el-scrollbar包围的区域，然后按下enter键，会发现这时el-scrollbar区域被一圈黑框围起来了，其实这是它的outline属性没被隐藏。
el-backtop关于 target is not existed: .page-component__scroll .el-scrollbar__wrap的问题
zhaoz的博客
07-19 1330
element的官网提供了两种 但是我们复制到项目中会发现控制台报 target is not existed: .page-component__scroll .el-scrollbar__wrap的问题 这里以第二种为例： <el-backtop :bottom="10" :right="0"> <div style="{ height: 100%; width: 100%; border-radius: 50%; fo
Backtop 回到顶部失效? 手搓回到顶部按钮【基于vue自定义】
General_D的博客
05-21 1916
解决elemnt-ui的Backtop组件失效问题，两种方法帮你解决小烦恼~ 基于vue自定义一个回到顶部按钮，包含超视距显示、视距内隐藏、一键回到顶部，诸多丝滑小妙招等你来撩，阿巴阿巴~
解决el-scrollbar横向滚动条不出现的问题
AzeShinja的博客
12-19 4610
在使用el-tree的时候想要好看的滚动条效果，但是懒得自己搞，就想着使用el-crollbar去解决，但是出现的效果是只有垂直滚动条没有水平滚动条，并且横向的数据被遮住了。
[BUG记录] Element Plus 的 Backtop 组件未生效
ymzhao
06-14 1892
vue项目，页面使用了 Element Plus 的 Scrollbar 组件包裹。在页面内引入 Backtop 组件，未随着页面滚动生效
如何使用el-scrollbar组件？
03-03
el-scrollbar是Element UI库中的一个组件，用于在容器中创建一个自定义滚动条。使用el-scrollbar组件的步骤如下： 1. 首先，确保你已经安装并引入了Element UI库。可以通过npm或者CDN的方式引入Element UI。 2. 在需要使用el-scrollbar组件的页面中，使用`<el-scrollbar>`标签包裹需要添加滚动条的内容。 3. 在`<el-scrollbar>`标签内部，添加需要滚动的内容。 4. 可以通过设置`wrap-class`属性来自定义滚动条的样式。 5. 可以通过设置`native`属性为true来使用浏览器原生的滚动条。 下面是一个使用el-scrollbar组件的示例代码： ```html <template> <div> <el-scrollbar wrap-class="scrollbar-wrap"> <!-- 需要滚动的内容 --> <div class="content"> <!-- 内容 --> </div> </el-scrollbar> </div> </template> <script> export default { // 组件相关代码 } </script> <style> .scrollbar-wrap { /* 自定义滚动条样式 */ } .content { /* 内容样式 */ } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值