IOS UC QQ浏览器 scroll事件踩坑(UIWebvie
首先说一下结论,iOS UC QQ浏览器(应该都是uiwebview),scroll事件是无法实时监听的。同时会对js的执行也有不同的影响。
-
页面级的滚动(正常文档流,页面高度大于屏幕高度)
在滚动时会阻塞所有js脚本,可以查看这个简单的demo。
页面上每隔一秒刷新一次时间,为排除滚动时可能只是阻塞了部分的渲染,每秒还向服务器发送一次请求,观察服务器的log(这个就没法演示了)。
可见无论是惯性滚动,还是手不离开屏幕拖动,时间都无法刷新,服务器也无法收到请求,只有touchmove
的回调在走。 -
DOM级别的滚动
DOM定高,overflow:scroll
,demo地址。
DOM滚动时,不会阻塞js执行,页面时间正常刷新,服务器正常接收请求。
但是无法解决的问题仍是:scroll时间无法实时监听。
解决方案:
非要解决的话,就使用iScroll之类的库模拟滚动。
------------------------------分割线,以下是以前记录的,懒得删了------------------------------
老样子,首先交代背景
需要在滑动时候,即将出现的card,做一个拉杆效果,就是让他像被缓慢的拉出一样
原理其实很简单,给下面被盖住的元素一个y方向的translate
,初始为负值让其被盖住,随着页面滑动逐渐把负值置零。
在Safari、Chrome、UC下都表现良好。但是在UIWebView中,滑动停止前,都不会触发scroll事件。例如下面的代码:
window.addEventListener('scroll' , function(){
// do something
});
即,
如果你是缓慢滑动,松手前,scroll事件不会触发。
如果你是快速滑动,松手后页面靠惯性滑动,滑动停止前,scroll事件不会触发。
究其根本原因:
UIWebView在进行momentum scrolling(弹性滚动)时,会停止所有的 事件响应 及 DOM操作引起的页面渲染,故 onscroll 不能实时响应。
这里不得不提到一个属性 -webkit-overflow-scrolling
如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。
对于这个属性,苹果公司的解释
- auto:就是普通的无惯性滚动效果
- touch:原生的滚动效果。使用此效果会构造一个 stacking context
什么是 stacking context?这可以说是CSS里一个阴暗面,极其晦涩。有兴趣的朋友可以去看高人的解释。
去掉这个属性,对解决不触发scroll事件,毫无用处
结论来了
想彻底做出这个效果,有两个选择:
- 更换webview
- 用库模拟滚动 iScroll之类的
为了效果好,还是早日更换webview吧。