vue上监听scroll事件 无效

最新推荐文章于 2023-03-24 10:38:38 发布
最新推荐文章于 2023-03-24 10:38:38 发布
阅读量3.9k 收藏 2
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljj890/article/details/89189720
版权

vue上监听scroll事件 无效的原因
1.window.addEventListener(“scroll”, this.handleScroll);
2. handleScroll(){
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
scrollTop > 60 ? this.secondMenuFixed = true : this.secondMenuFixed = false
},
这个时候mouted里面的scroll事件一直不起作用，原因是：父级元素用了overflow：auto，等等的有关overflow的样式，注释掉之后就正常了！！！

ljj890
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
12-13
本文实例讲述了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法。分享给大家供大家参考，具体如下： 在网上看了一下vue中监听滚动条滚动事件，清一色的使用document.addEventListener('scroll',function(){}) 我是在做滚动条滑到底部时，自动加载更多的时候有这个需求。 我认为使用document.addEventListener会破坏vue的统一性，对我这种有轻微代码强迫症的人来说，让我感觉很不爽。而且这种做法，会让你更加难以判断是否滑动到底部了，特别是当你并不是整页滚动，而是页面中拥有一个fixed固定的头部时。 在.vue的组件
vue监听滚动事件实现滚动监听
11-26
在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> [removed][removed] <style type="text/css"> #box { width: 100%; height: 2000px; } </style
解决vue处理handleScroll报错问题
weixin_44363162的博客
05-16 2324
解决vue处理handleScroll报错问题 代码： 滚动事件添加 self.$nextTick(() => { window.addEventListener(‘scroll’, self.handleScroll); }); 不需要在mounted中加载，因为页面回退时，页面没有滚动会报underfined ...
vue中监听页面滚动和监听元素滚动
奋斗的小猪
01-29 1382
监听页面滚动 在生命周期mounted中进行监听滚动： mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法中定义监听滚动执行的方法： scrollToTop() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollT
【element-ui】使用了v-infinite-scroll的元素不要在它身上加v-if和v-show，因为这样会使得下来加载失效
zdz的博客
12-16 443
【element-ui】使用了v-infinite-scroll的元素不要在它身上加v-if和v-show，因为这样会使得下来加载失效
div上添加scroll监听事件失败的原因
肖帅的博客
01-21 6160
1，问题：在给div添加scroll监听事件时，发现添加失败，即在添加的方法中没有执行要添加方法，如下 document.querySelector('.appMain').addEventListener('scroll',this.handleScroll,true) 2，发现问题 在寻找问题的过程中，使用window添加 scroll 监听事件时可以的，但是在div上添加scroll监听事...
vue真机上监听scroll事件失效
qq_39235090的博客
11-09 1527
真机监听scroll事件失效
vue 无法监听scroll事件
爱萝莉的死肥宅
03-05 2045
大家好，在使用过程中发现一个问题，就是在一个组件上监听scroll事件无效，有滚动操作也没有触发。 后面想到了一个解决方法：就是在mounted钩子里绑定addEventListener事件，废话不多说，直接上代码 这样就能监听到scroll的事件了 向往这个代码对您有帮助 ...
关于iframe或document监听滑动(scroll)失败的问题
子燕若水的博客
12-04 2731
出现了这个问题我们总是把时间花在分析为什么iframe这个element不能滑动?该怎么设置? 其实iframe监听滑动如果出了问题,首先该分析的是里面的document到底能不能滑动. -------------------------------------------------------------------------------------------------------------------------- iframe监听滑动本身其实很简单,只需要iframe的contentW
使用vue.js在页面内组件监听scroll事件的方法
12-29
思路：scroll在哪儿个组件内，就在获取那个dom元素。网上好多思路是 window.addEventListener(scroll, function(){ console.log('scrolling'); }); 这是监听不到的！如果你整个网页可以滑动，或许还可以试试！ ...
关于v-show和v-if遇到better-scroll出现错误的解决
纸月四的博客
12-05 543
v-show和v-if 今天在写一个项目时，遇到了一个问题。使用了 better-scroll 来做页面滚动，首页进入后可以滚动，但是点击搜索框后出现搜索记录却无法滚动。查看 scroll 的打印发现 hasVerticalScroll: false，并且 scrollerHeight 和 clientHeight 都是 0，那就是都没有获得高度。最后把 v-show 改成 v-if 就可以了。 问题出现原因： 众所周知，v-show渲染了dom，只是把dom的style设置为：display:none ，
vue 上拉加载实现
Stavin Li的博客
05-07 1714
<ul class="list" ref="scrollBox"> <li v-for="(item, index) in data" :key="index"> ... </li> </ul> <script> mounted() { // 监听如果页面发生滚动时 this.$nextTick(() => { this.$refs.homeUl.addEventLis
vue 两步实现点击导航栏，滚动页面到指定位置的功能
前端小白的学习分享小世界
03-24 7532
实现在页面不同位置点击左侧导航栏，滚动页面到对应板块（指定位置）的功能，并可以自定义滚动操作的速度和距离。
关于js滚动的相关判断
nick_zhang的博客
05-27 2475
window.addEventListener(‘scroll’,this.scrollToTop) // 对文档中某一处元素的scroll事件@scroll=“handleScroll($event)”,把document换成e.target let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; let clientHeight = window.innerHeight || document.d
返回顶部
lio-zero 的博客
05-12 265
锚点和平滑滚动 在 <html> 元素上提供以 ID 为目标的链接 <div id="top"></div> <a href="#top">跳转到页面顶部</a> 我们可以使用最新的 scroll-behavior 属性来实现 CSS 平滑滚动 html { scroll-behavior: smooth; } 查看效果 检测滚动位置：scroll 事件 使用 document.documentElement 返回文档的根元素，我们需要它
Vue中实现页面上滑加载更多，用@scroll监听滚动事件，解决@scroll无效问题
卡洛背心的博客
12-08 1995
在处理移动端的业务中，遇到需要页面滑动到底部加载更多数据的需求。下面就是个人实现加载更多功能的具体思路和踩坑详解。 第一步：先给div内容添加滚动事件 <template> <div class="content" @scroll="scrollCon"> <ul> <li></li> …… <li></li> </ul> </div> <template>
一面/二面（5）之防抖和节流
weixin_30980795的博客
07-07 173
~公司前端大佬面试前端的时候，问了什么是防抖和节流，所以我也把这部分内容总结了一下： 在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。 1.函数防抖 函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
vue中给window添加滚动监听无效的解决方案
热门推荐
小圣贤君的博客
04-08 1万+
页面中有这么一个需求，当页面滚动到一定高度之后，页面中的某些元素进行吸顶，固定到顶部位置，或者是滚动到一定程度进行更新数据的操作。 我相信不少网友查阅过类似的资料，网友给出的解决方案，很多都是在mounted中添加 window.addEventListener("scroll", this.handleScroll); 采用这种形式来实现页面监听滚动的效果。 笔者最初也是采用了这种方...
vue-seamless-scroll 监听滚动事件
最新发布
09-13
要在 `vue-seamless-scroll` 组件中监听滚动事件，可以使用 `@scroll` 指令来实现。在组件上添加 `@scroll` 指令，并将其绑定到一个方法上，该方法将会在滚动事件触发时被调用。 以下是一个示例代码： ```vue ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值