[移动开发]ios与安卓禁止所有滚动和输入框上推页面的不同处理方案

input

• ios中的input事件
  • 在ios中input事件与Android中的input事件不同，在安卓中如果有input输入框在页面底部，或者说当聚焦时键盘会遮挡input输入框时，ios系统会上推页面将键盘部分的高度并使页面上推键盘高度的值，因此可以在页面上推的时候获取scrollTop的值暂存，在键盘收起时将暂存的值重新赋值给scrollTop因此实现页面在键盘展开与收起时位置相同。其实在键盘收起时也可以获取一下scrollTop的值，用当前值减去暂存的值就是键盘的高度，也就是页面上推的高度。
• Andorid中的input事件聚焦时，页面不会上推，而是会触发窗口的resize，相当于窗口减小了，减小的值就是键盘的高度。因此页面不会上推，各种操作相对简单。

阻止滚动

• 当出现如评论等输入框的需求时，我们大可以阻止页面滚动，阻止页面滚动有多种方式如下：
  • 一种是阻止window滚动，此时可以在外层元素上加fixed定位解决，当需要阻止滚动时进行定位，不需要时取消定位即可
  • 使用mask蒙层，以Vue为例，可以使用vant的蒙层组件，mask蒙层固然可以阻止触摸蒙层来滚动，但是当触摸评论框时还是会触发window的滚动，因此不是一个在评论框出现时来阻止滚动的最好方法。
  • 使用事件监听，在不想用滚动时完全可以监听touchmove事件，然后阻止它的默认行为，如下：

function preventDefault(e){
    e.preventDefault()
}
//passive默认为true，不写也可以，如果将其设置为true 那么e.preventDefault()就不会生效。
document.addEventListener("touchmove",preventDefault,{ passive: false }) 

在需要滚动时，例如评论结束，输入框消失时，可以移除该监听器，代码如下：

document.removeEventListener("touchmove",preventDefault,{ passive: false }) 

这样子就可以实现页面无法滚动了，因为移动端的touch事件默认行为就是让页面滚动，阻止默认行为后那么页面就不滚动了。

原理如该博客：https://www.cnblogs.com/ziyunfei/p/5545439.html
参考该博客：

• https://www.kancloud.cn/mini-enjoy-document/me-system/1351531
• https://www.cnblogs.com/wxcbg/p/10452985.html