挖坑指南：$(window).scroll()事件没有生效

最新推荐文章于 2022-12-14 11:45:14 发布
最新推荐文章于 2022-12-14 11:45:14 发布
阅读量2.4k 收藏 1
点赞数 1
分类专栏： 挖坑指南 文章标签： window.scroll $(window).scroll 页面滚动事件 事件无效 当js遇上css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39015132/article/details/84984109
版权

直接上车吧~

绑定了滚动事件，但是页面滚动时，事件的回调函数并没有触发。

一开始严重怀疑哪里写错了，后来检查了真的没问题，这个锅谁背？

检查CSS，发现html设置了overflow-x: hidden; 罪魁祸首

之前也写过一篇关于CSS样式影响JS代码执行的文章，感觉两者越来越有意思...
 

嘘寒问暖 不如打笔巨款~

車句
关注
专栏目录
vue3 window scroll 自动被触发_精读Vue 3.0 Function API
weixin_42499790的博客
01-06 189
1. 引言Vue 3.0 的发布(发布了Vue 3.0的一些API)引起了轩然大波，让我们解读下它的 function api RFC 详细了解一下 Vue 团队是怎么想的吧！首先官方回答了几个最受关注的问题：Vue 3.0 是否有 break change，就像 Python 3 / Angular 2 一样？不，100% 兼容 Vue 2.0，且暂未打算废弃任何 API(未来也不)...
window监听scroll事件失效，window.addEventListener(‘scroll‘,callback)
qq_41442929的博客
12-08 6403
window监听scroll事件实效 今天在写一个页面的时候需要监听页面的滚动 代码书写格式如下 window.addEventListener('scroll',callback) 发现不管怎么弄callback 函数都无法执行 后来问了部门的大佬才解决，现做一个记录 解决办法如下 { height:100%; overflow:hidden; } 将上面的css样式放于需要监听的页面的顶层父元素身上，然后在获取该父元素的dom，监听其滚动即可 假如有如下dom页面 <div class
$(window).scroll()无法触发
热门推荐
try again
12-15 2万+
很奇怪对不对，为什么官网 ，w3c复制下来的全部没用，原因是什么！字母漏打，字符中英文打错吗？ 作为一个菜鸟，我也不知道为啥，我也是第一次遇见！但是我比一般的菜鸟好一点，因为我有大牛带路。 其实，当你发现没有其他问题可以找的时候，就应该想想为什么执行不了，为什么不能执行原因一般是  写函数的过程遇到 1. 少字符  2. 错中英文符号 3.  运用方式有问题（js jq运用方式有问题）一种
$(window).scroll无效的原因
weixin_43130844的博客
03-17 1108
如果在css中html、body的高度样式设置为100%，那么$(window).scroll方法将检测不到正确的滚出高度，导致滚动监听事件失效
vue window.scrollTo屏幕滚动
岁末zzz的博客
01-25 6320
获取高度和滚动高度 滚动到一定高度导航栏跟着变化 点击导航栏 跳转到指定位置
让scroll事件在滚动条停止时响应
weixin_34198453的博客
06-10 263
用过scroll事件的人都知道，在每次拖动滚动条的时候会相应的事件会相应多次，而在大多数情况下我们都只希望它在滚动条停止滚动的时候 响应。经过多次测试，终于发现了一个比较好的解决方案，那就是通过setTimeout，给scroll加个延迟。例如用jQuery为页面加入 scroll事件，可以这样写： vartimeout=false;$(window).s...
Vue3.x 中使用window的scroll监听页面滚动(非setup写法)
飞扬小阁
01-28 2939
window.addEventListener，window.removeEventListener第3参数需为true mounted() { console.log('mounted') window.addEventListener('scroll', this.onScrollFunc, true) }, beforeUnmount() { console.log('beforeUnmount') window.removeEventListener(
window-scroll:window.scrollX 和 window.scrollY 的 Polyfill
07-02
var scroll = require ( "window-scroll" ) ; console . log ( "window.scrollX:" , scroll . getScrollX ( ) ) ; console . log ( "window.scrollY:" , scroll . getScrollY ( ) ) ; 安装 npm install window-...
使用vue.js在页面内组件监听scroll事件的方法
12-29
window.addEventListener(scroll, function(){ console.log('scrolling'); }); 这是监听不到的！如果你整个网页可以滑动，或许还可以试试！ 对于像我这样，只在页面的内的一个div内要监听的。 实现代码如下： 第一...
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
12-13
本文实例讲述了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法。分享给大家供大家参考，具体如下： 在网上看了一下vue中监听滚动条滚动事件，清一色的使用document.addEventListener('scroll',function()...
window.removeEventListener失效问题
leveretz的博客
12-14 1387
window.removeEventListener失效问题
vue+vux scrollTop 实现定位到具体dom(scrollIntoView())
李古拉雷
03-29 8660
先看一下最终的运行效果。 项目背景介绍： 技术栈： vue+vux+nodejs 需求：对汽车品牌列表可以按照字母进行索引定位 在开发中实现这种需求，心想还不是小菜一碟，作为一个饱经bug的程序员，别的我就不吹了，最起码Ctrl+C用的还是蛮不错的。 虽然我的复制能力MAX，但最起码的功能点还是要先梳理一下。 要实现这个功能统共分两步， 第一根据点击找到需要定位的位置， ...
H5上拉加载以及在微信内置浏览器上拉加载失效问题记录
angula
11-11 3410
第一次采用了距离顶部距离的方式来控制上拉加载 $(window).scroll(function () { // 滚动条距离顶部的距离 大于 200px时 if ($(window).scrollTop() >= nowPageNo * (nowPageNo * 100)) { console.log('距离大于200') console.log(stopPage) if (stopPage .
$(window).scroll(function() { })； window的滚动事件不触发以及offset().top数据乱的原因？
AAAXiaoApple的博客
10-13 1602
$(window).scroll(function() { }); window的滚动事件不触发以及offset().top数据乱的原因？ 如果你的css中：html,body的高度样式如果设置为100%，那么$(window).scroll方法将检测不到正确的滚出高度（0），导致滚动监听事件失效。 $(window).scroll() 方法不能触发 这个是我在项目中遇到**,$(window).scroll()**当我在使用这个事件方法的时候竟然不能响应,很是郁闷,后来才发现是css样式影响到了,废话少说
$(window).scroll()触发失效
在希
08-11 2921
标题$(window).scroll()触发失效 最近遇到一个问题，在项目中写了$(“window”).scroll()方法，但是在滚动页面的时候发现此方法没有触发，后来查找原因才发现是因为页面中的html或者body元素设置了overflow:auto样式才无法出发 解决方式：在页面结构布局完整的情况下将改样式去掉。 关于window.scroll系列方法汇总 & 滚动到指定元素位置 1.window.scroll() 概述 滚动窗口至文档中的特定位置。 语法 window.scroll(x-co
JQuery中$(document)和$(window)是什么意思,有什么作用
stupider0623的博客
09-09 691
  $(document) 是当前文档，就是你看到的整个网页 $(window) 如果没有框架则就是你浏览的当前浏览器的窗口   $(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数，因为它可以极大地提高web应用程序的响应速度     首先我解释一下jQuery jQuery有一个用来作为DOM快速载入javascript的得心应手的...
$(window).load()方法理解、使用场景
L.Cheng Blog
10-11 4193
1、$(window).load() 和window.οnlοad=function(){}是页面中的所有元素（包括图片、flash）等都加载完毕后，才能执行；$(document).ready() 是页面中的DOM元素加载完成后便可执行。2、$(window).load()和window.οnlοad=function(){}不同的是，前者可以和$(document).ready()一样，可以同时加载多个函数。
$(window)和$(document)
小白一直白
04-23 8175
$(window).height()和$(document).height()的区别 jQuery(window).height()代表了当前可见区域的大小，也就是你浏览器所能看到的页面的那部分高度。 jQuery(document).height()则代表了整个文档的高度。 注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQu...
解决方案：$(window).scroll无效问题。
孤芳不自赏
03-04 8460
问题 $(window).scroll无效问题。 原因 如果你的css中：html,body的高度样式如果设置为100%，那么$(window).scroll方法将检测不到正确的滚出高度（0），导致滚动监听事件失效。 解决办法 &lt;style&gt; html,body{height:auto} &lt;/style&gt; ...
this.$refs.scroll.setScrollTop(this.$refs.log.clientHeight) 改为ts写法
最新发布
12-11
this.$refs.scroll.setScrollTop(this.$refs.log.clientHeight); ``` 需要注意的是，TypeScript是JavaScript的超集，因此大部分JavaScript代码都可以直接转换为TypeScript代码。在这个示例中，我们只需要将代码放入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值