使用React开发移动端web app
需要监听容器元素的滚动距离来实现 实时 加载对应子元素
可滚动的容器元素非全局body
滚动方式采用原生滚动,由 css 设定 body{-webkit-overflow-scrolling:touch} 实现弹性滚动
事件监听采用过: react的onScroll事件, JQ的scroll方法及原生onscroll事件,均会出现以下问题
在部分浏览器(例如:safari)下,手指触发滚动后抬起,此时元素会处于弹性滚动过程,此时这部分浏览器依旧能 实时 监听到滚动事件并做出响应,另外一部分浏览器(例如:UC及微信内嵌浏览器等),当抬手让元素处于弹性滚动过程时,浏览器并不能实时进行事件响应,而是当滚动完全停止后浏览器才会执行事件回调
希望懂的朋友能帮忙解决下,万分感谢!
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
5
2553
收藏
这个没有办法，移动端浏览器内核限制了onscroll事件的触发频率。需要用iScroll.js。本质其实就是自己实现滚动。
手机京东的顶部 搜索条 就可以实时监听scroll 实现滚动变色
监听body 的scroll 事件来代替window.onscroll。
可能需要换方案了