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

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

把target指向你要产生“回到顶部”按钮的组件,
这个组件一定要是产生滚动条的组件!
这个组件一定要是产生滚动条的组件!
这个组件一定要是产生滚动条的组件!

举个栗子,App.vue中的栗子

<template><div id="app" class="wrapper" style="height:520px;overflow: auto;"><div class="wrapper-content" style="height:2020px;background-color:aliceblue;text-align:center;position:relative;"><!-- 回到顶部 --><template><el-backtop target=".wrapper-content"></el-backtop></template><div>顶部</div><div style="position:absolute;bottom:0;left:49%;">底部</div></div></div>
</template><script>
export default {};
</script><style scoped>
html,body,#app {height: 100%;
}
</style>

这样是不会产生按钮的,因为wrapper-content组件不会产生滚动条,更不会有滚动事件,要把target改成 target=“.wrapper”,因为真正产生滚动事件的是wrapper。

注意这句样式:

 <div id="app" class="wrapper" style="height:520px;overflow: auto;">

要给父组件overflow: auto,和高度,否则父组件会被自动撑开,不产生滚动事件(如果有滚动条那也是上级的,如果上级一直没有设置height那就是window的);把520px设置为100%也是没有用的,可以用document.body.offsetHeight这个方法设置适合屏幕的高度;若不想设置具体高度则加上下面这句样式,把上级高度全部100%也是管用的

html,body,#app {height: 100%;}

附上官网介绍
在这里插入图片描述

  • target最好用id,因为唯一
  • template必不可少
  • 使用target以外的属性时一定要用冒号(v-bind),因为它接收的是数字,不用冒号只能传字符串,如
<el-backtop target=".wrapper" :visibility-height="200" :right="40" :bottom="40"></el-backtop>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/278544.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何创建一份springboot的docker镜像

2019独角兽企业重金招聘Python工程师标准>>> FROM centos:7 ENV JAVA_HOME /usr/java/jdk1.7.0_55 ENV MAC_PUBLISH_PATH /home/app ENV LOG_PATH /var/log ENV PATH $JAVA_HOME/bin:$PATH ENV TIME_ZONE Asia/Shanghai COPY jdk-7u55-linux-x64.rpm /opt/ RUN mkd…

Xamarin.Android 开发中遇到旋转屏幕错误

错误信息 : System.NotSupportedException: Unable to find the default constructor on type App5.MyFragment. Please provide the missing constructor. 错误图片&#xff1a; 解决方法&#xff1a;干脆不让他旋转屏幕&#xff0c;当下QQ、微信等app都没有旋转等功能&#…

原生js打印指定节点元素

很简单&#xff08;可粘贴至txt文档后改后缀为html打开看效果&#xff09;&#xff1a; <!doctype html> <html lang"en"> <head><meta charset"utf-8"><title>打印</title><meta name"viewport" conte…

Android社会化分享详解

前言现如今app市场竞争激烈&#xff0c;做app不会放过任何推广自己的app的渠道&#xff0c;如果app中没有社会化分享功能&#xff0c;那真的是OUT了&#xff0c;我们先来看下一些app中的分享界面功能吧。现在主流的分享平台&#xff0c;一般用的都是微信、QQ、微博&#xff0c;…

windows7黑屏修复_如何在Windows 10更新后修复黑屏

windows7黑屏修复RealVector/Shutterstock.comRealVector / Shutterstock.comSome Windows 10 PCs have been rebooting to a black screen after installing the June 2019 cumulative update from Windows Update. This seems scary at first, but luckily there’s a quick …

[sol]250OJ 1~10

下载 转载于:https://www.cnblogs.com/yztblog/p/10208314.html

vue/cli4 创建vue项目选项详解

多版本创建项目一、vue-cli2.x二、vue-cli3.x三、vue-cli4.x1.查看 vue 版本&#xff1a; 项目中,找到package.json文件夹 找"dependencies"中的vue &#xff1b; 若无项目&#xff0c;在cmd中输入 where vue&#xff0c;cd到vue目录下输入 npm list vue &#xff0c…

java 商品评价计算算法

import java.io.Serializable; import java.lang.ref.ReferenceQueue; import java.lang.ref.WeakReference; import java.math.BigDecimal; import java.math.RoundingMode;/*** 商品评价算法* * project icomment* fileName ProductScore.java* Description* author light-z…

rainmeter使用教程_如何使用Rainmeter在桌面上显示报价

rainmeter使用教程I’ve never really been a desktop gadgets and widgets type of person, but I often put an inspirational quote on my desktop wallpaper. Today we’ll show you how to do this using Rainmeter, no matter what wallpaper you switch to. 我从来没有真…

Some code changes cannot be hot swapped into a running virtual machine

java运行中修改代码不能改变立刻应用到本次运行中转载于:https://www.cnblogs.com/Pusteblume/p/10211110.html

自定义v-drag指令(横向拖拽滚动)

指令 Vue.directive(drag, {// 钩子函数&#xff0c;被绑定元素插入父节点时调用 (父节点存在即可调用&#xff0c;不必存在于 document 中)。inserted: (el, binding, vnode, oldVnode) > {console.log(el, binding, vnode, oldVnode)let drag el; // 要拖拽的元素// let …

javascript获取时间差

function GetDateDiff(startTime, endTime, diffType) {//将xxxx-xx-xx的时间格式&#xff0c;转换为 xxxx/xx/xx的格式 startTime startTime.replace(/\-/g, "/");endTime endTime.replace(/\-/g, "/");//将计算间隔类性字符转换为小写diffType diffTy…

JMeter扩展JMeter插件获取更多监听器

为了获取更多监听器&#xff0c;方便的监控系统及应用&#xff0c;有必要安装第三方插件 插件下载地址&#xff1a; https://jmeter-plugins.org/downloads/old/ http://pan.baidu.com/s/1gfC11yN 注&#xff1a;如果插件和软件版本不兼容&#xff0c;可能在开启Jmeter时会报错…

如何阻止Chrome(或Edge)接管媒体密钥

Google Chrome now has built-in support for media keys. Unfortunately, Chrome will take over your media keys and prevent them from controlling apps like Spotify when you’re watching YouTube, for example. Here’s how to make Chrome ignore your media keys. G…

js滚动条滚动到指定元素

let item document.getElementById("item"); // 指定的元素 let wrapper document.getElementById("wrapper"); // 其父元素 - 必须是产生滚动条的元素// 元素聚焦法定位 // item.focus(); // 可用 outline:none; 除去聚焦产生的框; 对于默认没有聚焦的…

开源性能测试工具JMeter快速入门(一)

目录一、JMeter简介二、JMeter功能介绍三、JMeter脚本四、关于JMeter小提示一、JMeter简介1.定义JMeter是Apache组织开发的基于Java的压力测试工具。用于对软件做压力测试&#xff0c;它最初被设计用于Web应用测试&#xff0c;但后来扩展到其他测试领域。 1&#xff09;它可以用…

八重州8900如何解锁_八重贵族怪胎之路

八重州8900如何解锁Dealing with computers day in and day out can be a harrowing experience. In difficult times, or even when things are idle, finding some spirituality can help cope with the experience—Techies: I give you the Eightfold Noble Geek Path. 日…

mysql 5.7.18 winx64安装配置方法

在mysql-5.7.18-winx64文件夹下新建my.ini文件[mysql] # 设置mysql客户端默认字符集 default-character-setutf8 [mysqld] #设置3306端口 port 3306 # 设置mysql的安装目录 basedirD:\Program Files\mysql-5.7.18-winx64 # 设置mysql数据库的数据的存放目录 datadirD:\Prog…

js 实现拖拽滚动、滚轮缩放元素函数和案例

文章目录一、拖拽滚动1、封装函数2、示例&#xff1a;二、滚轮缩放1、封装函数2、结合拖拽滚动示例一、拖拽滚动 1、封装函数 /*** description 使用鼠标拖拽div&#xff0c;实现横向、纵向滚动* param el 被拖拽滚动的元素&#xff08;产生滚动条的元素&#xff09;*/functio…

怎么解决input中readonly属性的iOS一直存在光标问题

用css中的pointer-events:none转载于:https://www.cnblogs.com/studyh5/p/8352061.html