vue回到顶部，滚动条监听，移除监听

最新推荐文章于 2024-04-12 14:03:40 发布
最新推荐文章于 2024-04-12 14:03:40 发布
阅读量1.9k 收藏
点赞数
文章标签： vue 返回顶部 监听事件 移除监听事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WGTkris/article/details/96648478
版权

做到vue项目里有一个回到顶部功能，比较简单，绑定一个点击事件即可，

当触发点击事件，当前页面滚动条的位置为0

实现滚动条监听

1、在methods定义方法

a、滚动条滚动时跟顶部的距离

b、可以看见的内容区域（可视区）的高度

c、滚动条的总高度

2、设置需要实现的功能

如果滚动条跟顶部的距离 > 一个窗口的外部高度，'返回顶部'按钮就会出现

如果滚动条跟顶部的距离 + 可视区的高度 = 滚动条的总高度（也就是到达底部），'返回顶部'按钮就会隐藏

3、在mounted()添加这个监听事件

移除监听

WGT_Kris
关注
vue监听滚动事件，实现某元素随着滚动条滚动固定距离顶部的某个位置（元素的top值实时变化）
日常笔记/总结/系列知识梳理
06-15 3万+
HTML <div class="fixed" id="searchBar"> </div> CSS fixed { position: fixed; bottom: 100px; top:
vue滚动事件监听
一只小白奔向大牛的故事
11-14 1616
最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。 1、监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首先，在mounted钩子中给window添加一个滚动滚动监听事件， mounted () { window.addEventListener('scroll', this.hand...
vue中scroll监听页面滚动、移除监听。
weixin_45803990的博客
07-12 1180
【代码】vue中监听滚动对应方法和清除监听滚动。
22/09/26 vue3,页面监听scroll&移除scroll
Nighsloth的博客
09-26 2573
vue3,移除和监听scroll事件
vue移动端监听滚动事件实现导航栏上滑隐藏下滑显示功能
weixin_43925947的博客
05-25 2614
场景描述：手机端的顶部导航栏 向上滑动隐藏 向下滑动显示。 <script> export default { data(){ return{ i = 0 } }, mounted () { window.addEventListener('scroll', this.handleScroll, true);
前端vue成功解决滚动条滚动监听问题！
最新发布
xiejunlan的博客
04-12 1525
前端vueUse之useScroll的使用成功解决滚动条滚动事件问题
Web前端之Vue移除监听不起作用的解决办法、监听的使用、删除监听、卸载监听、关闭监听、事件总线、方案、watch
CSDN博客主页地址：https://mengjian.blog.csdn.net/
10-26 8953
Web前端之Vue移除监听不起作用的解决办法、监听的使用、删除监听、卸载监听、关闭监听、事件总线、方案、watch
vue监听 vue实时监听窗⼝滚动条
07-05
下面将详细介绍如何在Vue中实现窗口滚动条的实时监听。 1. **监听滚动事件** 在Vue组件的`mounted`生命周期钩子中，我们可以添加事件监听器来监听窗口的滚动事件。这是因为`mounted`阶段表示组件已经被挂载到DOM中...
vue移动端监听滚动条高度的实现方法
10-18
在Vue.js移动端开发中，有时我们需要监听滚动条的高度来实现特定的交互效果，例如当用户滚动到页面的一定位置时，头部导航栏变为固定定位。本文将详细介绍如何在Vue中实现这种功能。 首先，我们需要知道在...
VUE 实现滚动监听 导航栏置顶的方法
10-18
本知识点将详细探讨如何利用Vue.js框架实现滚动监听功能，并在用户滚动页面时将导航栏固定于页面顶部。 首先，需要明白实现滚动监听导航栏置顶功能需要掌握的关键技术点包括： 1. 使用Vue的`data`函数来定义组件的...
vue 监听 取消监听
xiaosi1413的博客
03-05 3048
vue 监听的用发
vue2 vue3 移除事件监听
weixin_45610518的博客
11-11 3774
<script > // 因为要监听 scroll 事件所以做个节流 // 按需引入 throttle import throttle from 'lodash/throttle' export default { mounted() { // 添加事件监听 // 注意这里的this.getScroll不能加()调用 window.addEventListener('scroll', this.getScroll) //
this.$once(‘hook:beforeDestory‘,())
u012174809的专栏
03-02 4068
使用场景 不想创建定时器实例，创建的定时器代码和销毁定时器的代码没有放在一起，通常很容易忘记去清理这个定时器，不容易维护;(本人在这方面栽过跟头) getServeTimeSetTime() { // 开启定时器，五分钟获取一次服务器时间 const timer1 = setInterval(this.handleGetServerTime, 5 * 60 * 1000) // this.$once('hook:beforeDestroy', () =&gt
vue项目中使用$.once(‘hook:beforeDestory‘,() =＞ {})清理定时器问题
hong_hq的博客
05-19 1074
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录方法一方法二直接在需要定时器的方法或者生命周期函数中声明并销毁,代码如下： 在vue项目通常我们清理定时器的方法时，通常有两种方法 方法一 1、首先在vue实例的data中定义定时器的名称： export default{ data(){ timer:null } } 2、在方法（methods）或者页面初始化（mounted()）的时候使用定时器 this.timer = setInterval(()=&g.
vue监听element-ui的table表格滚动事件
相濡以沫不如相忘于江湖.
12-23 4256
template里边的代码我就不写了，你们可以直接用element-ui里面的table，也可以自己封装。这篇文章主要是讲述“如何监听element-ui table滚动事件”，按我自己尝试的方法去实现。如果要用第二种的话就用element-ui里边的分页组件，去实现就好，我用的第一种方法实现的。前两天做项目遇到一个问题，数据量大，然后表格渲染的很慢，而且很卡怎么办？那无非就是两种方法。
Vue添加销毁监听滚动事件
輕描淡寫的博客
08-21 2117
添加 window.addEventListener("scroll",this.adsorb) 销毁 window.removeEventListener("scroll",this.adsorb) this.adsorb不能写成this.adsorb()否则只会在加载完成执行一次就不执行了。 如果想要传参应该在方法里添加监听事件如： adsorb(data){ 　　window.addEventListener("scroll",function(){ 　　　　//要做的事 ...
vue监听滚动事件 实现某元素吸顶或者固定位置显示
热门推荐
王永存
09-16 10万+
最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。 1、监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首先，在mounted钩子中给window添加一个滚动滚动监听事件， mounted () { window.addEventListener('scroll', this...
vue2如何取消带参数的监听事件
weixin_44784401的博客
12-14 2826
vue2如何取消带参数的监听事件
vue监听滚动条
QS_Master的博客
05-05 3159
mounted(){ window.addEventListener('scroll',this.handleScroll,true) }, methods:{ handleScroll(e){ var scrollTop = document.documentElement.scrollTop || document.body.scroll...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值