首页 > webapp 滚动卡屏

webapp 滚动卡屏

本人在开发一个混合模式的webapp项目,最近碰到一个问题: 首页上下滚动时页面未立即跟随手指的方向进行滚动而是在过了一会时间后页面开始滚动,但是页面在滚动过程中还是会移动一段距离后卡下,接着再移动到下一个位置。
已经测试了 appframework 的af.scroller.js、iScroll.js、islider.js、jndroid 等滚动插件发现其中滚动是使用了css3 的 translate3d来进行平移的。
在weinre 调试器中对执行的touchmove事件进行触发时间点的输出发现了,当我手指在屏幕滚动时触发时间点立即在weinre的console 栏中输出,但是页面实际移动却是在所有touchmove 事件触发时间点输出后再进行移动的。 因此是否有可能是android手机浏览器在js执行到平移样式时阻塞了translate3d 效果,而在touchmove事件都触发完成后在执行所有的translate3d效果。
如何解决这个滚动延迟触发且,滚动时又有卡顿出现的现象呢?????
此处是iscroll.js 中的设置平移样式:
this.scroller.style[transform] = 'translate(' + x + 'px,' + y + 'px) scale(' + this.scale + ')' + translateZ;
希望有碰到过此问题的朋友给本人一些提示!
测试手机是小米2s

【热门文章】
【热门文章】