关于vue中滚动监听失效问题

最新推荐文章于 2024-05-31 11:18:25 发布

转载最新推荐文章于 2024-05-31 11:18:25 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/QxkWeb/p/7497128.html

文章标签：

#javascript #ViewUI

本文解决了一个Vue项目中遇到的问题：监听window滚动失效且document.body.scrollTop始终为0。问题的根源在于index.html中html和body的高度被设置为100%。解决办法是将html和body的高度设置为auto。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue项目中,

监听window滚动失效;并且document.body.scrollTop一直是0的情况!

查找了许多资料;并没有找到合理的解决方案;

最中发现,在index.html设置了html,body的宽高设置成了100%;

这样会造成window.onscroll监听不到正确的滚出高度(恒为0);

不和你们多bb:解决方案:

将html,body的height设置为auto;即可解决!!

转载于:https://www.cnblogs.com/QxkWeb/p/7497128.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30548917

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue中添加滚动事件设置的方法详解

10-14

在前端开发中，尤其是在使用Vue这样的现代JavaScript框架时，对滚动事件的监听和处理是一种常见的需求。Vue框架提供了一种简便的方式来监听滚动事件，并根据滚动事件执行相应的逻辑处理。首先，了解滚动事件...

vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解

10-16

主要介绍了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法,结合实例形式分析了@scroll监听滚动事件无效问题的原因及相应的解决方法,需要的朋友可以参考下

参与评论您还未登录，请先登录后发表或查看评论

vue中监听scroll事件失效的问题及解决。

weixin_47404583的博客

09-23

1941

因为我写的div 只是window内部的一个小元素，所以，需要向下捕获才可以。vue中监听scroll事件失效的问题及解决。无法监听到滚动的事件，不打印console。vue 监听scroll 事件也不生效。对于这个问题解释一下这三个参数吧。

Vue监听滚动条停止

JQ___的博客

03-05

2498

1.在需要监听的组件的data中设定数值 data() { return { timer: null, scrollT: 0, stopscroll: 0 }; }, 2.在methods中设定方法 handleScroll() { clearTimeout(this.timer);//清除定時器 this.t...

vue @scroll监听滚动条事件，解决不生效问题

weixin_43205308的博客

04-23

3376

1、单纯加 @scroll并不生效 <Row @scroll="loadMore"> 2、在配置@scroll同时在mounted加上一下方法 mounted(){ window.addEventListener('scroll',this.loadMore,true) }, 3、loadMore方法可以自己定义 loadMore: function (e) { console.log(e) } 4、通过以上可以顺利监听滚动条监听事件

vue项目滚轮失效问题

zhj1329000的博客

03-24

5709

我也是遇到这个问题，分享一下解决方案和思路； 1.首先要找到你要滚动的页面节点，在浏览页面找到他的父元素，然后更改父元素的overflow属性 overflow: auto;（没改之前是overflow：hidden，超出部分隐藏自然不能滚动）； 2.类似问题都可以从根源下手，一样的解决思路。 ...

解决vue组件中click事件失效的问题

12-13

本文将详细解析如何解决Vue组件中click事件失效的问题，以及涉及到的Vuex中未知mutation类型的错误。首先，让我们深入理解Vue中的事件绑定。Vue提供了多种方式来绑定事件，例如`v-on:click`、`@click`和`@click....

解决vue 绑定对象内点击事件失效问题

12-12

突然的发现某段 html 代码中点击事件失效了。仔细观察才发现，这段代码内的...以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

VUE监听左右滑动（vue-touch)

换日线的博客

03-07

2763

VUE监听左右滑动（vue-touch) 首先需要安装（vue-touch) npm安装 npm install vue-touch@next --save //main.js中引入全局使用： import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) 使用方法 //html代码 <template> ...

onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法(vue上监听scroll事件

m0_57454052的博客

04-07

2566

在vue.js中直接使用onscroll不起作用利用DOM二级监听事件即可， window.addEventListener('scroll',()=>{console.log(window.scrollY)}) 如果问为什么不能在vue组件上直接监听一般来说根据我的测试情况，监听滚动基本上监听的都是整体document或者window。监听的都是相对于整体（document或者window）的当前可见区域的文档片段（就是你眼睛可以看到的部分），而不是去监听单个的DOM片段，因为这么做没有意

vue3中scrollTo不生效解决方案

ygzhzzy的博客

05-31

1977

其它随便，至于是为什么，我的理解是 overflow:hidden;是超出部分隐藏，它是强制你的高度就只能是你设置的大小，不管你怎么滚它就怎么大点，所以把它设为别的或注释掉试试呢；直接说原因，是css样式overflow引发的window.scrollTo();overflow一定不能为hidden。还有一点，记得设置高度。

Vue解决使用window.onscroll时报 Uncaught TypeError: 相关错误

qq_41429765的博客

05-13

532

Uncaught TypeError: Cannot read property 'offsetLeft' of undefinedat window.onscroll

vue真机上监听scroll事件失效

qq_39235090的博客

11-09

1776

真机监听scroll事件失效

vue使用使用@scroll监听滚动事件时，监听滚动事件时，@scroll无效问题的解决方法

qq_49173190的博客

04-07

1852

vue使用使用@scroll监听滚动事件时，监听滚动事件时，@scroll无效问题的解决方法

vue 数据监听失败原因和解决方式

lin1214000999的博客

09-19

8770

如果操作对象是数组，改变数组的值用Vue的 $ set方法，改变数组的长度用数组的splice方法使数组变化变成可监听的。如果操作对象是对象。如果操作的属性是对象内已经有的值，使用$ watch,加上关键字deep深度监听对象，如果操作的属性是对象内没有的新属性。使用$set使对象变成可监听的。

window.onscroll无效问题