IOS UC QQ浏览器 scroll事件踩坑(UIWebvie

2017-08-22  本文已影响1598人  NowhereToRun

首先说一下结论,iOS UC QQ浏览器(应该都是uiwebview),scroll事件是无法实时监听的。同时会对js的执行也有不同的影响。

  1. 页面级的滚动(正常文档流,页面高度大于屏幕高度)
    在滚动时会阻塞所有js脚本,可以查看这个简单的demo
    页面上每隔一秒刷新一次时间,为排除滚动时可能只是阻塞了部分的渲染,每秒还向服务器发送一次请求,观察服务器的log(这个就没法演示了)。
    可见无论是惯性滚动,还是手不离开屏幕拖动,时间都无法刷新,服务器也无法收到请求,只有touchmove的回调在走。

  2. DOM级别的滚动
    DOM定高,overflow:scrolldemo地址
    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系统的手机上则不会出现该问题。

对于这个属性,苹果公司的解释

什么是 stacking context?这可以说是CSS里一个阴暗面,极其晦涩。有兴趣的朋友可以去看高人的解释

去掉这个属性,对解决不触发scroll事件,毫无用处

结论来了
想彻底做出这个效果,有两个选择:

  1. 更换webview
  2. 用库模拟滚动 iScroll之类的

为了效果好,还是早日更换webview吧。

上一篇 下一篇

猜你喜欢

热点阅读