el-backtop + el-scrollbar踩坑记录

最新推荐文章于 2024-01-04 12:25:58 发布
最新推荐文章于 2024-01-04 12:25:58 发布
阅读量186 收藏
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sdasdadadad/article/details/134457944
版权

项目要做个滚动加回到顶部，然后我用elementplus的el-backtop + el-scrollbar，一直显示不出来，我一直调整el-backtop里属性和它的位置，最后发现el-backtop的target这个属性非常重要！！！它代表你要监听滚动的元素，因为我这里除了我的根元素还有个 el-scrollbar所以还要加上.el-scrollbar__wrap，最终最终，终于解决了，困扰我好久了....

hhhhhnnnnnnn
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
react-Back-To-Top:可自定义的自上而下的组件以进行React
05-26
从头到尾React 可自定义的自上而下的组件以进行React 安装 npm i react-back-to-top 或者 yarn add react-back-to-top 用 首先导入项目： import BackToTop from 'react-back-to-top'; 使用的是JSX： <BackToTop mainStyle={{ width:'100%', height:'100%', background:'url(...)' }} percentStyle={{ width:'100%', height:'100%', }} animate='rotate' offsetTop={20} step={50} perc
react-backtop:宽度上的后盖组件仅对移动设备起作用
05-10
React后台 一个纯JavaScript <backtop>组件，用于响应。 安装 Ctrl+c(hahaha) 用法 var Backtop = React . createClass ( { // ...... } ) ; React . render ( < Backtop> , document . getElementById ( 'top' ) ) ; ES6 我建议您尝试一下＆我提供es6组件版本。 领有牌照 :copyright: 等 :red_heart:
Element Backtop回到顶部的具体使用
12-28
组件— 回到顶部 基础用法 Scroll down to see the bottom-right button. 自定义显示内容 Scroll down to see the bottom-right button. <el-backtop target=.page-component__scroll .el-scrollbar__wrap :b
graduation-design:毕业设计
03-24
毕业设计 毕业设计的源码 简要介绍： 15个React常用组件 1.按钮按钮2.Icon图标3.panel折叠面板4.分页5.评分6.表格（表格） 7.BackTop（回到顶部） 8.模态9.气泡确认框10.PhotoLooker（图片预览器） 11，轮播图12.徽章（徽标数） 13.旋转14.消息15.tab标签页 到本地 1. git clone https://github.com/wanglongkai/graduation-design.git 2. npm install 3. npm start
解决vue3中使用el-backtop 无效
欢迎来到我的小世界
03-03 1268
解决vue3中使用el-backtop 无效
Web前端篇——ElementUI之el-scrollbar + el-backtop + el-timeline实现时间轴触底刷新和一键返回页面顶部
u011391361的博客
01-04 1869
ElementUI之el-scrollbar + el-backtop + el-timeline实现时间轴触底刷新和一键返回页面顶部
el-scrollbar 滚动条
qq_52335038的博客
06-02 3339
解决el-scrollbar 滚动条不生效的办法
Element Ui 表格自定义滚动条，以及自定义滚动条后出现空白问题
我是一个酒鬼的博客
05-12 7235
Element Ui 表格自定义滚动条，以及自定义滚动条后出现空白问题
为什么element的el-backtop会不管用，来看这里
GeniusXYT的博客
05-23 5723
<template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> </template> 把target指向你要产生“回到顶部”按钮的组件， 这个组件一定要是产生滚动条的组件！ 这个组件一定要是产生滚动条的组件！ 这个组件一定要是产生滚动条的组件！ 举
el-backtop的使用
qq_41391569的博客
04-10 2162
官网代码不起作用还会报错 <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> 改为 <el-backtop></el-backtop>
Vue中ElementUI的奇淫巧技
SunPeng的博客
01-07 1000
el-scrollbar 滚动条 看到这个组件是不是有点陌生，陌生就对了，因为它从来没有出现在 element 官网上（估计是性能问题），但好东西怎么能藏着掖着，来上效果图。 是不是比原生的滚动条美观多了，使用方法也非常简单： <el-scrollbar> <div class="box"> <p v-for="item in 15" :key="item">欢迎使用 el-scrollbar {{item}}</p> </d
项目小get20211210
weixin_48451943的博客
12-11 120
el-breadcrumb el-breadcrumb1 el-breadcrumb2 breadcrumb 用于显示当前页所在位置，方便返回 Element 提供了一个separator属性，在el-breadcrumb标签中设置它来决定分隔符，它只能是字符串，默认为斜杠 / template template HTML内容模板（template）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。 将模板视为一
滚动条+返回顶部
---
04-23 1024
1.js实现滚动条+返回顶部 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>返回顶部</title> <style type="text/css"> /* 1.关于overflow属性——当内容溢出元素框时 属性值 - visible(默认值):内容不会被修剪，会呈现在元素框之外 - auto 如果内容被修剪，则浏览器会显示滚动条以
elementUI的el-backtop(返回顶部)不生效
weixin_54930261的博客
12-30 5063
这个是基础用法，自定义用法跟这个也差不多，就是中间加了些样式。看起来这个例子很简单对不对，按照最简单的原则拿过来就用，Ctrl+C到自己项目后就等着出现回到顶部按钮，结果实际结果却令我大失所望，直接报错了。，心想这下子应该是可以了吧。结果运行的时候错误是没有了，但是那个心心念念的回到顶部按钮怎么都出现不了，难道是我姿势不对？目前我采用的方法是简单粗暴的删除target不指定对象， 也是能显现按钮，并且回到顶部。既然给出了原因，那解决应该很简单，不是找不到这个样式吗，那我就在外层套个。的功能的时候遇到坑了。
解决ElementUI的el-backtop无效的问题
weixin_45714898的博客
06-29 5455
错误用法示例 1. 直接拷贝了elementui的示例代码，添加了bottom和visibility-height属性 2. 控制台报错Error in mounted hook: "Error: target is not existed: .page-component__scroll .el-scrollbar__wrap" 解决方法1 去掉target，直接使用el-backtop <template> <div id="app"> <d
Element-ui之ElScrollBar组件滚动条的使用
热门推荐
前端江湖
04-25 8万+
在使用vue + element-ui 搭建后台管理页面的时候，做了一个头部、侧栏、面包屑固定的布局，导航栏和主要内容区域当内容超出时自动滚动。原来是采用优化浏览器样式的方式，对滚动条进行样式调整。但这个方法并不兼容火狐浏览器，在火狐访问时依然是浏览器默认的滚动条样式。在查看element文档时发现页面滚动条很精致，于是产生了灵感：能否使用element使用的滚动条组件呢？带着这个问题我们看这篇文章。
el-backtop不起作用的解决办法
wmklalala的博客
02-16 6841
插入官网上的代码发现不起作用还会报错 <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> 更改为以下代码即可 <el-backtop></el-backtop> ...
element-ui 使用el-backtop无效问题
这是我的博客
03-31 6104
基本格式： <template> <el-backtop target=".父级盒子class" :visibility-height="100" :bottom="60"></el-backtop> </template> target可以省略，即： <el-backtop></el-backtop> 有时候会发现这...
button el-backtop 怎么调用
最新发布
01-20
在使用 Vue.js 开发中，可以通过以下步骤来调用 el-backtop 组件： 首先，在 Vue 组件中引入 el-backtop 组件： ```javascript import { Backtop } from 'element-ui'; export default { components: { Backtop, }, // 其他代码 } ``` 然后在需要使用 el-backtop 的地方，可以直接在模板中引用它： ```html <template> <div> <backtop :right="100" :bottom="100" :visibility-height="200"></backtop> </div> </template> ``` 在这个例子中，我们通过 backtop 组件的属性设置了回到顶部按钮距离右侧和底部的距离，以及滚动条滚动多少才显示回到顶部按钮。 另外，还可以在页面中直接调用 el-backtop 组件的方法，来动态控制它的行为。比如： ```html <template> <div> <backtop ref="backtopBtn"></backtop> <button @click="handleBacktop">回到顶部</button> </div> </template> ``` ```javascript export default { methods: { handleBacktop() { this.$refs.backtopBtn.scrollTo(); }, }, // 其他代码 } ``` 通过以上的步骤，就可以在 Vue.js 中调用 el-backtop 组件，并根据需要来控制它的显示和行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值