阅读 261
ios内嵌网页消除阻尼回弹效果,让前端解决?

ios内嵌网页消除阻尼回弹效果,让前端解决?

现在大部分app应用内的常规活动或者需要经常修改变更的页面,均会以内嵌H5形式呈现,让前端来完成开发;做页面so easy; 但是在ios端下拉和上拉出现的阻尼回弹效果,让页面体验变得非常差;一个是会漏出底部的黑色背景; 第二个就是网页内的局部滚动和ios的系统滚动混合,导致局部和页面一块滚动,体验就差起来;

这时,产品经理项目经理就说,你得把这个解决掉!!!!

好吧就撸起袖子干起来;

一屏页面

第一种形式,页面就只有一屏,不溢出; 那么采用fixed定位 + scroll; 好家伙,成功触发css的一个bug,成了我在这个公司一个挥之不去的锅盖(原因待续……)

具体表现就是,整个页面fixed定位后,在榜单等部分需要溢出滚动时,设置overflow-y: auto; 那么在ios端,快速上下滑动时,整个滚动就会被卡死。 这个现象可以参考css的解释;

多屏页面

涉及长背景,我们无法说采用上述形式; 但是就会出现漏底,或者说局部滚动和页面滚动混合情况;这时,我尝试过进行监听touchmove, 在榜单内部时,将整个页面overflow:hidden掉,在榜单外滚动,将页面释放;

缺点明显,性能差,异常操作页面未及时释放或者快速操作情况下,造成仿佛卡死的现象; 所以依旧是被舍弃掉的;

最终只能悻悻然跟上头汇报,说暂时没找到较优的方案

ios开发工程师出场了

一行代码解决

wkwebview.scrollview.bounces = NO
复制代码

然后说了一句,你们都没人找我;早说呀,我……………………

回想起来,不管是产品经理还是项目经理,技术总监,他们曾经都跟我说的是,让我前端解决…… 前端技术主管,也说,你去琢磨琢磨……

这种别人一行代码解决的事情啊,今天解决了,这感觉,很酸爽&~*……@?

文章分类
前端
文章标签