首先说一下结论，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吧。
网友评论