移动端onscroll事件在部分浏览器内不能实时触发

最新推荐文章于 2023-09-15 15:16:40 发布
最新推荐文章于 2023-09-15 15:16:40 发布
阅读量7.4k 收藏
点赞数
分类专栏： javascript 文章标签： 浏览器 移动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanhu6816/article/details/53127819
版权
出现问题:
在部分浏览器(例如:safari)下,手指触发滚动后抬起,此时元素会处于弹性滚动过程,此时这部分浏览器依旧能 实时 监听到滚动事件并做出响应,另外一部分浏览器(例如:UC及微信内嵌浏览器等),当抬手让元素处于弹性滚动过程时,浏览器并不能实时进行事件响应,而是当滚动完全停止后浏览器才会执行事件回调。
原因分析:
ios的webview 内核 设定了其在进行momentum scrolling(弹性滚动)时,会停止所有的 事件响应 及 DOM操作引起的页面渲染 (亲测),故 onscroll 不能实时响应
不知道怎么破，求大神帮助
老虎帅呆了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
JavaScript触发onScroll事件的函数节流详解
10-20
的内容是说说最近在工作中遇到过的常见的问题。主要是关于JavaScript触发onScroll事件的函数节流，文中由一个常见的问题开始展开，一步步的介绍解决的方法，有需要的朋友们下面来跟着小编一起看看吧。
关于onScroll事件在IE6下每次滚动触发三次bug说明
09-05
今天测试发现IE6下用[removed]，每次滚动时会触发3次，而火狐、IE7没此问题，应该是IE6的一个BUG
window.onscroll无效问题
热门推荐
friendan的专栏
06-11 1万+
我的环境： | Grails Version: 3.1.4 | Groovy Version: 2.4.6 | JVM Version: 1.7.0_80 ------------------------------------------------------------------------------ --------------------------------------
解决window.onscroll在部分安卓手机不生效
weixin_56006480的博客
05-26 799
是监听滚动事件的一种方式，但是在某些安卓手机上可能会有不生效的情况。这是因为在某些安卓手机上，滚动事件并不是通过。这种方式可以兼容各种浏览器和设备，包括在某些安卓手机上无法通过。对象来触发的，而是通过其他对象触发的，因此。为了解决这个问题，我们可以使用。方法来监听滚动事件。在上面的代码中，我们使用。并不能监听到滚动事件。监听滚动事件的情况。
微信浏览器window.onscroll无效
最新发布
woshiabc111的博客
09-15 221
换成window.addEventListener(“scroll”, function(){})和jquery的$(window).scroll(function(){都没用。发现在浏览器中window.onscroll可以正常获取滚动的值，但是在手机微信里window.onscroll就失效了。最后换成IntersectionObserver才算可以了。搞一个公众号html网页投票，下拉到底部加载更多。这微信内置浏览器是真tm的坑啊。
Android手势操作onScroll没有执行（以及onFling问题）
flycatdeng的专栏
01-14 3173
现象：将某一手势操作交给GestureDetector时，GestureDetector重写了几个方法，但是onScroll没有执行，其他的onDOwn,OnLongPress都有执行。 解决：onDOwn方法的返回值返回true
onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法(vue上监听scroll事件
m0_57454052的博客
04-07 2381
在vue.js中直接使用onscroll不起作用 利用DOM二级监听事件即可， window.addEventListener('scroll',()=>{console.log(window.scrollY)}) 如果问为什么不能在vue组件上直接监听 一般来说根据我的测试情况，监听滚动基本上监听的都是整体document或者window。 监听的都是相对于整体（document或者window）的当前可见区域的文档片段（就是你眼睛可以看到的部分），而不是去监 听单个的DOM片段，因为这么做没有意
关于移动端scroll不执行的问题
大泽的博客
12-26 9412
别问我为什么直接拿去用<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> </head> <body >
React.Js添加与删除onScroll事件的方法详解
10-19
主要给大家介绍了关于React.Js添加与删除onScroll事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
$(window).scroll() 方法不能触发
u011784205的专栏
07-30 1万+
这个是我在项目中遇到,$(window).scroll()当我在使用这个事件方法的时候竟然不能响应,很是郁闷,后来才发现是css样式影响到了,废话少说,直接上代码 这个是我在js中使用的 $(window).scroll(function (event) { console.log(event); }) 下面是我修改之前的css样式: body { text-a
关于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/ 这...
scroll事件失效问题
kingdomwar的博客
02-21 500
scroll事件触发条件
移动端h5常见问题
weixin_44708870的博客
03-29 1081
弹出数字键盘 安卓跟IOS的表现形式应该不一样，大家可以自己试试。当运用了正则pattern后，就不用关注input的类型了
在web页面中onscroll事件不触发的状况记录
突维
05-11 1868
起因 今日在用vue开发前端页面的时候，需要添加一个无限加载的效果。这时候就用到了onscroll事件，拿出来以前开发的无限加载的vue组件来使用，发现并没有实现预期的效果。然后进行排查，发现是一直不触发onscroll事件。 既然找到了问题的所在，就要找到解决的办法，排查了好久，发现是因为css样式导致的scroll事件不触发。 onscroll不触发的原因和解决 这种scroll事件不触发的原因是因为下面这样一段css代码： html,body{overflow:auto;
onscroll在移动端的使用
weixin_30500105的博客
05-22 506
1.实际需求   （移动端项目）当往下滑动到一定距离时，显示导航栏，导航栏定位在顶部，当向上滑动并小于那个距离时，导航栏隐藏。 2.解决方案   实时监测浏览器滚动高度，绑定onscroll事件，具体详情见此文--https://github.com/merrier/mobile-scroll-events，此文介绍的很详细，包括在Android 和 ios上的兼容性问题，以及处理方案。下...
优化移动端window.onscroll的执行频率方案
weixin_34290631的博客
12-08 522
脑洞爆炸的背景 最近开发项目动效开发越来越多 ； 部分动效需要在页面滑动的时候执行一定的效果；但是发现在移动端 很多时候页面滑动的速度快的时候 ， 动效呈现的不稳定性越明显 ， 会不流畅； 虽然使用css3的过渡可以从视觉层面解决这个问题 ， 但是并不能根治， 于是乎想到了一个方案。。。 requestAnimationFrame（RAF...
js window.onscroll事件
06-08
`window.onscroll` 事件在文档视图滚动时触发，可以使用该事件来执行一些操作。 以下是一个简单的示例，当页面滚动时，会在控制台输出当前滚动距离： ```js window.onscroll = function() { console.log(window....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

老虎帅呆了

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

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

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

打赏作者

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

抵扣说明：

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

余额充值