window.addEventListener('scroll', yourFunction)的问题

最新推荐文章于 2024-06-19 14:30:50 发布
最新推荐文章于 2024-06-19 14:30:50 发布
阅读量1.2w 收藏 2
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VVVZCS/article/details/82585192
版权

假如我们在一个页面中设置了window.addEventListener('scroll', this.handleScroll)，那么当我们使用路由跳转到其他页面的时候，可能就会仍停留在原来的位置，什么意思呢，

就是我们在A页面中滑动到比如距离Top500px的距离，这个时候在A页面的500px地方有一个路由可以跳转到B页面，B页面设置了window.addEventListener('scroll', this.handleScroll)监听属性，我们会发现当从A页面跳转到B页面，我们在B页面中距离Top也是500px

这个问题是因为vue路由中滚动的跳转造成的

解决方法：

设置路由跳转的滚动方法

https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8

这样就可以跳转到B页面顶部了

VVVGG
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
window监听scroll事件失效，window.addEventListener(‘scroll‘,callback)
qq_41442929的博客
12-08 6266
window监听scroll事件实效 今天在写一个页面的时候需要监听页面的滚动 代码书写格式如下 window.addEventListener('scroll',callback) 发现不管怎么弄callback 函数都无法执行 后来问了部门的大佬才解决，现做一个记录 解决办法如下 { height:100%; overflow:hidden; } 将上面的css样式放于需要监听的页面的顶层父元素身上，然后在获取该父元素的dom，监听其滚动即可 假如有如下dom页面 <div class
addeventlistener监听scroll跟touch(实例讲解)
12-04
这三个事件只在手机上生效 touchstart：手指开始触屏 touchmove：手指移动 touchend：手指触屏结束 这个事件在手机上跟在pc端都生效 scroll事件 addeventlistener(name,callback,optional,useCapture) useCapture：事件是否用捕获事件，从外到里，true                         默认为false:使用冒泡事件，从里到外 optional:{      passive:false时，阻止默认事件，ture时不阻止默认事件(默认值是false) } passive:true可以防止
window.addEventListener 用法
ivan5277的博客
05-29 1875
是JavaScript中用来为DOM元素（在本例中是浏览器窗口window）添加事件监听器的方法。这对于响应用户操作（如点击、滚动等）或页面/浏览器的特定状态变化非常有用。下面是如何使用。
关于addEventListener的使用和注意项
最新发布
yiguoxiaohai的博客
06-19 562
关于addEventListener的使用和注意项
vue 爬坑之路 - window.addEventListener('scroll'，xx）
Amen的博客
01-07 2294
因项目需求有一个滑动分页功能 因为js是单独抽离出来的，就有多个vue调用这个js 所以就发现了怎么跳转页面了，并且这个页面我没有调用页面滑动事件， 这个滑动加载下一页的功能还在执行 解决办法就是当前页用完了就及时销毁这个监听事件 ps： 我尝试过在执行完滚动事件的方法（getTabList(){}）之后就把滚动事件销毁了，但是我发现这个销毁了就再也加不上了。。 新手新手，可能是还能在...
react监听页面滚动事件：window.addEventListener的scroll无效
热门推荐
lhz_19的博客
09-22 1万+
react监听页面滚动事件：window.addEventListener的scroll无效 在react项目中需要通过监听页面滚动高度，控制页面样式动态展示，所以在网上找了以后其他案例发现监听无效，代码如下： //在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理 componentDidMount() { window.addEventListener('scroll', this.handleScroll); } //在componentWil
vue中window.addEventListener(‘scroll‘, xx)失效解决办法
1
12-14 7284
多次尝试都无法获取到滚动事件,后来加上true之后就可以了 window.addEventListener('scroll', this.clintHeight, true)
js 滚动监听，核心方法
橙-极纪元-cplvfx-JJY.Cheng
03-08 2492
js 滚动监听，核心方法
Animation-on-scroll
05-07
window.addEventListener('scroll', function() { var element = document.querySelector('.your-element-class'); if (isElementInViewport(element)) { // 执行动画效果 animateElement(element); } }); ...
网页模板——回到网页顶部的JS代码.zip
11-24
document.addEventListener('scroll', function() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (scrollTop > 100) { // 当页面滚动超过100像素时显示按钮 document....
html5 canvas实现的页面滚动背景图片旋转动画特效源码.zip
11-03
window.addEventListener('scroll', function() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; // 使用scrollTop进行动画计算 }); ``` 5. **旋转动画**：在滚动事件处理器中，...
CSS3实现页面滚动时填充图标颜色动画效果源码.zip
11-02
window.addEventListener('scroll', function() { var icons = document.querySelectorAll('.icon'); icons.forEach(function(icon) { var rect = icon.getBoundingClientRect(); if (rect.top >= 0 && rect....
js悬浮QQ在线客服代码(支持拖动)
02-18
window.addEventListener('scroll', function() { var QQonline = document.getElementById('qq-online'); QQonline.style.bottom = (window.innerHeight - QQonline.offsetHeight - window.scrollY) + 'px'; }); ...
监听页面滚动
09-19 183
监听页面滚动事件 window.onscroll window.addEventListener('scroll', function () { //函数体 }) 获取页面滚动高度 document.documentElement.scrollTop在桌面端可用，在移动端值一直为0 document.body.scrollTop在移动端可用，在桌面端...
react.js 监听滚动事件：window.addEventListener的scroll问题
吴冬雪的博客
05-11 3735
// 组件加载时 componentDidMount () { window.addEventListener('scroll', this.handleScroll, true) } // 组件卸载时 componentWillUnmount () { window.removeEventListener('scroll', this.handleScroll, true) } // 监听滚动 handleScroll = () => { console.log('进来').
vue项目中window.addEventListener scroll在移动端无效
weixin_41587194的博客
08-26 6747
在vue项目中有一个页面滚动的加载数据的事件，一开始用window.addEventListener scroll在浏览器上调试时可以监听到事件，但是在移动端上无法监听到scroll事件 window.addEventListener('scroll',()=>{ console.log("页面滚动事件") }) 既然无法实现监听功能就干脆把监听事件绑定到dom元素上 &...
vue addeventlistener_vue-router原理
weixin_39786155的博客
11-25 291
vue-router原理主要分成两部分，一部分是安装，另一个是实现数据监控，页面跳转。安装export 通过混入beforeCreate实现，路由的绑定和监听操作。初始化router。调用Vue工具类方法defineReactive，当router发生改变时，页面能及时响应更新。最后通过registerInstance来实现对router-view的挂载操作。数据监控和页面跳转路由更新 ->...
JavaScript 事件学习笔记
Samuel的博客
08-14 600
事件 事件流——事件冒泡流、事件捕获流 事件流描述页面接收事件的顺序 冒泡 结构上（非视觉上）嵌套关系的元素会存在冒泡事件功能，及同一事件，子元素向父元素冒泡 捕获 IE没有 将addEventListener第三个参数设置true 结构上（非视觉上）嵌套关系的元素会存在捕获事件功能，及同一事件，父元素向子元素捕获 DOM事件流 DOM2 Event规范规定事件流分三阶段：事件捕获、到达目标、事件冒泡 通常不认为到达目标后的事件处理阶段不属于事件捕获，而被认为是冒泡阶段的一部分 现代浏览器会在捕获阶段在事件
Nuxt2怎么设置自定义指令v-scroll
04-26
window.addEventListener('scroll', f) } }) } ``` 3. 接下来，在Nuxt2的nuxt.config.js文件中引入自定义指令的插件： ``` export default { plugins: [ '~/plugins/directive', ], } ``` 4. 最后，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值