背景iOS内嵌H5页面默认有弹簧效果,即整个页面可以上下拖动滚动弹簧效果视频但不是所有场景都想要为了达到这个效果,这篇文章主要是用来记录如何禁用正统的做法。处理WebView容器默认效果最正统的方法当然是让容器自己提供Bridge开关。InternetHybrid应用程序通常会遇到类似的问题。但是很可惜,我们这里没有Native开发,BridgeSDK也不支持任何自定义扩展,所以只能在H5范围内使用野蛮的方式来处理禁用滚动的问题。代码,思路是禁止超出边界的滚动,但是我深入研究了几个人的代码后,我发现它不好用,或者根本不起作用,或者是里面的区域可以上下滑动的页面。我不能动了。毕竟,如果它运行良好,我不需要编写一个可以在Internet上找到的解决方案。网上的代码不太好用,懒得自己写了。虽然这个实现的大体思路比较清晰,但是写的时候要考虑的东西还是很多的,要花不少功夫和时间。有没有合适的图书馆已经这样做了?GitHub拯救世界。我不知道我哪里用错了。github上的一些库也有使用上的问题。折腾了半天,终于找到一个好用的https://github.com/lazd/iNoBo...,这个库支持引入脚本标签,老项目也可以通过以下方式使用:尽快引入inobounce.min.js,然后在window上挂载iNoBounce属性。在适当的时候调用window.iNoBounce.enable()。这次指的是页面已经完全渲染出来了,但是我发现页面的挂载使用存在一些问题,会导致页面整体错位。我在mounted里面延迟了500毫秒才恢复正常。最后的代码是//App.vuemounted(){setTimeout(()=>{//如果是iOS,禁用弹簧效果this.disableBounce();},500);},disableBounce(){if(isIOS()&&window.iNoBounce){window.iNoBounce.enable();}}这样一来,在iOS中嵌入H5就顺眼多了,整体感和安卓统一,减少了页面的轻浮感。但事情还没有到此为止。后来发现的问题。禁用spring功能上线后,我们的异常监控接连收到一些JS报错信息//报错信息TypeError:Argument1('element')toWindow.getComputedStylemustbe一个实例的入参有问题元素getComputedStyle方法。查了一下,发现是在这个库里报的。ininobounce.min.js格式化后的具体位置如下。可以看到这个el的来源是事件入参的target属性,这个东西一般公认是不应该出现空或者非Element对象的,而我们的测试机本地一直没能重现这个问题。我怀疑它可能只出现在某些特定的模型或场景上。虽然一直没搞清楚el到底能不能还是什么,但是解决办法很简单,加个健壮性逻辑就可以了。修改while行的条件后,不会有JS异常统计el!==document.body&&el!==document&&el&&el.nodeType===1
