监听滚动条页面时使用window时不生效

于 2023-12-08 17:47:31 发布
阅读量552 收藏 9
点赞数 9
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45776308/article/details/134884374
版权

1.父级页面设置了overflow：auto导致当前滚动的页面不属于window，可以直接监听最大的父级的元素，例如vue页面以id为app的元素为根元素，所以页面监听时可以直接使用这样使用：

在mounted生命周期里面加

document.getElementById('app').addEventListener('scroll',this.getScrollPosition,false)

weixin_45776308
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
12-13
在网上看了一下vue中监听滚动条滚动事件，清一色的使用document.addEventListener('scroll',function(){}) 我是在做滚动条滑到底部时，自动加载更多的时候有这个需求。 我认为使用document.addEventListener会破坏...
vue中监听scroll事件失效的问题及解决。
最新发布
weixin_47404583的博客
09-23 1095
因为我写的div 只是window内部的一个小元素，所以，需要向下捕获才可以。vue中监听scroll事件失效的问题及解决。无法监听到滚动的事件，不打印console。vue 监听scroll 事件也不生效。对于这个问题解释一下这三个参数吧。
vue真机上监听scroll事件失效
qq_39235090的博客
11-09 1622
真机监听scroll事件失效
vue中给window添加滚动监听无效的解决方案
小圣贤君的博客
04-08 1万+
页面中有这么一个需求，当页面滚动到一定高度之后，页面中的某些元素进行吸顶，固定到顶部位置，或者是滚动到一定程度进行更新数据的操作。 我相信不少网友查阅过类似的资料，网友给出的解决方案，很多都是在mounted中添加 window.addEventListener("scroll", this.handleScroll); 采用这种形式来实现页面监听滚动的效果。 笔者最初也是采用了这种方...
react监听页面滚动事件：window.addEventListener的scroll无效
lhz_19的博客
09-22 1万+
react监听页面滚动事件：window.addEventListener的scroll无效 在react项目中需要通过监听页面滚动高度，控制页面样式动态展示，所以在网上找了以后其他案例发现监听无效，代码如下： //在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理 componentDidMount() { window.addEventListener('scroll', this.handleScroll); } //在componentWil
VUE中@wheel和@scroll失败的原因
zhangbaisui的博客
11-08 1301
@wheel和@scroll监听滚动事件条失败的原因
jQuery判断div随滚动条滚动到一定位置后停止
12-01
标题中的"jQuery判断div随滚动条滚动到一定位置后停止"描述了一个JavaScript编程场景，其中使用jQuery库来处理网页元素的滚动效果。具体来说，它涉及到一个div元素（id为'widget'）在用户滚动页面时的行为。当div...
Vue 无限滚动加载指令实现方法
12-04
在JavaScript中，可以通过`window`对象或者`document`对象的属性来获取滚动条的位置。`scrollTop`表示滚动条顶部距离页面顶部的距离，`clientHeight`代表视口的高度，`scrollHeight`则是整个文档的高度。当`...
滚动触发css3动画
05-25
3. **JavaScript监听滚动事件**：要让动画在滚动条触发时生效，可以使用JavaScript监听`scroll`事件。例如，使用jQuery库： ```javascript $(window).on('scroll', function() { var scrollTop = $(this).scrollTop...
jQuery右侧悬浮楼层滚动代码.rar_jQuery右侧悬浮楼层滚动代码_watchitv
09-21
5. 使用`$(document).ready()`和`$(window).resize()`确保代码在页面加载完成后生效，并在窗口大小改变时重新调整悬浮楼层的位置。 这个jQuery右侧悬浮楼层滚动代码的实现不仅可以提升网站的用户体验，还可以增强...
vue @scroll监听滚动条事件，解决不生效问题
weixin_43205308的博客
04-23 2729
1、单纯加 @scroll并不生效 <Row @scroll="loadMore"> 2、在配置@scroll同时在mounted加上一下方法 mounted(){ window.addEventListener('scroll',this.loadMore,true) }, 3、loadMore方法可以自己定义 loadMore: function (e) { console.log(e) } 4、通过以上可以顺利监听滚动条监听事件
addEventListener监听
weixin_61978391的博客
04-06 1262
2.监听浏览器窗口（resize）1.监听滚动条（scroll）
onscroll监听不生效，scrollTop一直为0
a57521的博客
11-08 1382
scrollTop一直为0，监听页面滚动不触发
vue 中scroll事件不触发问题
anhuo5249的博客
12-29 3882
在vue项目中需要监听滚动条滚动的位置，结果写了scroll监听事件就是不生效，最后查资料发现是页面有样式设置了over-flow：scroll，去掉之后完美解决.(页面样式中存在over-flow：scroll，over-flow：auto的时候scroll事件监听不起作用，所以排查问题的时候首先需要考虑当前页面样式中是否存在over-flow)； export defa...
关于vue中滚动监听失效问题
weixin_30548917的博客
09-09 1989
在vue项目中, 监听window滚动失效;并且document.body.scrollTop一直是0的情况! 查找了许多资料;并没有找到合理的解决方案; 最中发现,在index.html设置了html,body的宽高设置成了100%; 这样会造成window.onscroll监听不到正确的滚出高度(恒为0); 不和你们多bb:解决方案: 将html,body的height设...
vue监听滚动scroll一直是0_vue里监听页面滚动的问题
weixin_39614750的博客
12-20 808
网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth(包括边线的宽);网页可见区域高： document.body.offsetHeight(包括边线的宽);网页正文全文宽： document.body.scrollWidth;网页正文全文高...
vue监听页面滚动事件
热门推荐
hyduan_h5的博客
05-07 2万+
方法：监听滚动实现 通过addEventListener方式监听 通过scroll获取到滚动 export default { data () { return { topNavBg: { backgroundColor: '' } } }, // 滚动监听 mounted () { window.addEventListener('scroll', this.handleScroll) // 监听页面滚动 }, met
windowScroll 监听页面滚动
sunluyi的博客
01-09 3305
mounted() { window.addEventListener("scroll", this.windowScroll);//监听页面滚动 }, methods: { //页面滚动 windowScroll() { let scrollTop = window.pageYOffset || document.docum...
JS监听页面滚动事件无效解决方案
xiaomao_wxj的博客
04-12 6172
window.addEventListener事件踩坑 1、在项目中使用window.addEventListener(“scroll”, this.handleFixedTop);事件监听无效解决方案： window.addEventListener("scroll", this.handleFixedTop,true); 使其在事件捕获的时候触发，该值默认为false(事件冒泡) 2、const scrollT = document.documentElement.scrollTop; 获取不到s
滚动条滚动时显示，不滚动时隐藏
06-01
您可以使用JavaScript监听滚动事件，当滚动条滚动时，添加一个CSS类来显示滚动条，当滚动停止时，移除该CSS类来隐藏滚动条。以下是一个示例代码段： ```javascript var scrollTimeout; // 监听滚动事件 window....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值