window.scroll无效、window.onscroll不响应

最新推荐文章于 2025-04-01 16:25:22 发布
最新推荐文章于 2025-04-01 16:25:22 发布
阅读量4.2k 收藏 3
点赞数 3
分类专栏： 前端 文章标签： js javascript vue dom html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TL18382950497/article/details/108230049
版权

解决方法

  1. document.body.scroll 代替 window.scroll来滚动页面
  2. window.onscroll不响应，换成document.body.scroll，同样不响应，网上搜索后，得知是body的高度设为了100%导致的，去掉即可。但是如果页面样式依赖于body的高度，这种办法就不好了
    最后通过document.body.addEventListener绑定事件解决了（原来是通过document.body.onscroll绑定的）
函数防抖与函数节流
尔东尘的博客
07-31 185
函数防抖与函数节流是属于性能优化的板块，既是面试常问的，也是实际开发中常用的
JavaScript学习笔记，页面滚动事件scroll的应用(滚动固定侧边栏)
秋泊酱的博客
12-11 821
知识点： scroll 滚动窗口至文档中的特定位置。(监听网页滚动条滚动事件，这个事件就是：window.onscroll) pageXOffset 属性返回文档在窗口左上角水平方向滚动的像素， pageYOffset 属性返回文档在窗口左上角垂直方向滚动的像素。 pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置， pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 pageXOffset 和 pageYOffset 属性相等于 scrollX 和 s
JavaScript：scroll() / scrollTop() / scrollBy()无效？
aozhe9623的博客
06-25 1232
*note 　　使用的浏览器：Chrome（67.0.3396.87）/ 火狐（60.0.2）/ IE（ie7和ie8），均为PC端。 · 示例 <script> window.scroll(0, 200); </script>　　 　　1. 表现结果 　　　　Chrome：只有第一次打开标签页面是有效的（在当前标签页不断刷新是...
window.onscroll无效问题
热门推荐
friendan的专栏
06-11 1万+
我的环境： | Grails Version: 3.1.4 | Groovy Version: 2.4.6 | JVM Version: 1.7.0_80 ------------------------------------------------------------------------------ --------------------------------------
详细解析ScrollWindow()
最新发布
felicity_one的博客
04-01 446
书籍：《(第五版)》环境：visual studio 2022内容：输出文字->滚动条信息函数说明：以下内容大部分来自腾讯元宝。
$(window).scroll无效的原因
weixin_43130844的博客
03-17 1198
如果在css中html、body的高度样式设置为100%，那么$(window).scroll方法将检测不到正确的滚出高度，导致滚动监听事件失效
微信浏览器window.onscroll无效
woshiabc111的博客
09-15 420
换成window.addEventListener(“scroll”, function(){})和jquery的$(window).scroll(function(){都没用。发现在浏览器中window.onscroll可以正常获取滚动的值，但是在手机微信里window.onscroll就失效了。最后换成IntersectionObserver才算可以了。搞一个公众号html网页投票，下拉到底部加载更多。这微信内置浏览器是真tm的坑啊。
$(window).scroll()触发失效
在希
08-11 3047
标题$(window).scroll()触发失效 最近遇到一个问题，在项目中写了$(“window”).scroll()方法，但是在滚动页面的时候发现此方法没有触发，后来查找原因才发现是因为页面中的html或者body元素设置了overflow:auto样式才无法出发 解决方式：在页面结构布局完整的情况下将改样式去掉。 关于window.scroll系列方法汇总 & 滚动到指定元素位置 1.window.scroll() 概述 滚动窗口至文档中的特定位置。 语法 window.scroll(x-co
vue中在mounted中window.onresize不生效
qq_31594665的博客
11-07 377
vue开发中，引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效。
React.Js添加与删除onScroll事件的方法详解
10-19
this.onScroll = this.onScroll.bind(this); } componentDidMount() { window.addEventListener('scroll', this.onScroll, false); } componentWillUnmount() { window.removeEventListener('scroll', this...
js中scrollTop()方法和scroll()方法用法示例
10-21
window.onscroll = function() { var scrollHeight = window.pageYOffset || document.documentElement.scrollTop; if (scrollHeight > 700) { // 当滚动超过700px时执行的操作 } else { // 其他情况下的操作 ...
JavaScript-事件的讲解（上）
OuYyds的博客
03-28 786
JS事件是指我们使用鼠标或者键盘做了某些事件来触发对应的处理函数 事件由三部分组成： 触发事件的元素； 对应的事件的函数；（事件函数的特点：全部小写且以on开头，onclick on事件开头，click是事件名点击的意思 事件的处理函数； <!-- 内联模式 直接在标签内容以指定属性的方式 较少 --> <button onclick="alert('hello')">点击</button> <!-- 内联模式 直接在标签内容以指...
vue3 elementplus使用container布局容器 scroll 失效问题
weixin_44536001的博客
06-05 919
当项目中的layout页面使用了container布局后 此时在展示页面中添加window.addEventListener("scroll")事件和document.body.scrollTop 相关都会失效，原因是因为具体的滚动是在el-mian元素上执行的我们需要在这个元素添加相关的监听操作。
wxxcx文档笔记——框架/事件/事件的捕获阶段
alary2012的博客
04-14 396
事件的捕获阶段 自基础库版本1.5.0起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。 在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、hand...
vue3中scrollTo不生效解决方案
ygzhzzy的博客
05-31 1817
其它随便，至于是为什么，我的理解是 overflow:hidden;是超出部分隐藏，它是强制你的高度就只能是你设置的大小，不管你怎么滚它就怎么大点，所以把它设为别的或注释掉试试呢；直接说原因，是css样式overflow引发的window.scrollTo();overflow一定不能为hidden。还有一点，记得设置高度。
记录一次scrollTo和scrollBy不生效的原因
苏一恒
03-22 1177
至于是哪个滚动, 打开开发者工具, 在 more tools 里找到 layers, 图层里找到滚动列表里最长的元素,scrollTo 要设置到滚动的元素上, 不一定是父元素, 也不一定是 window 啥的.发现所有文章都没说到点子上, 简单记录下.然后,找到这个元素,对他设置滚动即可.
onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法(vue上监听scroll事件
m0_57454052的博客
04-07 2541
在vue.js中直接使用onscroll不起作用 利用DOM二级监听事件即可， window.addEventListener('scroll',()=>{console.log(window.scrollY)}) 如果问为什么不能在vue组件上直接监听 一般来说根据我的测试情况，监听滚动基本上监听的都是整体document或者window。 监听的都是相对于整体（document或者window）的当前可见区域的文档片段（就是你眼睛可以看到的部分），而不是去监 听单个的DOM片段，因为这么做没有意
元素上scroll事件不生效
weixin_56815226的博客
10-08 610
高度不能100%（高度必须超过容器高度）
关于IOS设备window onscroll滚动条滚动事件不触发的问题
bwcx_jzy 的博客
03-08 1万+
http://blog.hooperui.com/%E5%85%B3%E4%BA%8Eios%E8%AE%BE%E5%A4%87window-onscroll%E6%BB%9A%E5%8A%A8%E6%9D%A1%E6%BB%9A%E5%8A%A8%E4%BA%8B%E4%BB%B6%E4%B8%8D%E8%A7%A6%E5%8F%91%E7%9A%84%E9%97%AE%E9%A2%98/ 这...
优化一下这段代码//1、获取元素 var one = document.querySelector('.one') var two = document.querySelector('.two') //2、绑定滚动事件 window.onscroll = function () { //2-1，获取浏览器卷去的高度 var height = document.documentElement.scrollTop || document.body.scrollTop //2-2，判断卷去的高度 if (height >= 300) { //显示 two.style.display = 'block' } else { //隐藏 two.style.display = 'none' } } //3，绑定点击事件 two.onclick = function () { //3-1，让页面滚动回到顶部 window.scrollTo({ top: 0, behavior: 'smooth' }) }
06-03
可以进行如下优化： 1. 将获取元素的代码封装成一个函数，方便复用； 2. 采用事件监听的方式代替直接给window对象绑定事件，避免冲突和覆盖； 3. 在滚动事件中，使用节流或防抖函数进行优化，避免事件频繁触发； 4. 在滚动事件中，判断当前滚动位置是否已经到达目标位置，如果是，就不再执行后面的代码； 5. 使用ES6的语法简化代码。 优化后的代码如下： ```javascript // 1、封装获取元素的函数 const $ = selector => document.querySelector(selector) // 2、使用事件监听代替直接绑定事件 window.addEventListener('scroll', throttle(() => { // 2-1、获取浏览器卷去的高度 const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 2-2、判断卷去的高度 if (scrollTop >= 300) { // 显示 $('.two').style.display = 'block' } else { // 隐藏 $('.two').style.display = 'none' } }), 300) // 3、给回到顶部按钮绑定点击事件 $('.two').addEventListener('click', () => { // 3-1、让页面滚动回到顶部 window.scrollTo({ top: 0, behavior: 'smooth' }) }) // 节流函数 function throttle(func, wait) { let timer = null return function () { if (!timer) { timer = setTimeout(() => { func.apply(this, arguments) timer = null }, wait) } } } ``` 注：上述代码使用了节流函数进行优化，每隔300毫秒才会执行一次滚动事件的回调函数。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tanleiDD

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值