阻止苹果xs max浏览器页面整体滚动

今天发现一个神奇的现象，在苹果xs max型号手机上滑动一个列表页面，整个页面（包括顶部fix的头组件）都在滑动，网上称之为橡皮筋效果。

页面的滚动看起来比较乱，其实知道原理可以分析出：
外层的滚动（上下会出白色无内容空间）是由于body在touchmove时发生了滚动，
内层的滚动（如列表内容在页面空间内滑动）是由于页面组件在touchmove时发生了滚动。

其实际上是个冒泡问题，解决办法是阻止body的滚动，直接上代码：

document.body.addEventListener("touchmove", function(e){
	e.preventDefault();  // 看网上文章说这一行可以不写
},{
	passive: false
})

DOM 规范做了修订，addEventListener原有的第三个参数useCapture可以传一个对象

{
    capture: false,
    passive: false,
    once: false
}

passive的原意是顺从，即执行浏览器的默认事件（本文中就是touchmove时页面默认滚动），passive: false即阻止浏览器默认事件。

意外收获：
在解决问题的过程中学习到，监听器的执行是耗时的（哪怕是空的监听器），这也是passive的作用，浏览器不需要在执行完监听器后执行默认事件，滑动等效果会更加顺畅。

参考：
https://www.cnblogs.com/ziyunfei/p/5545439.html
http://www.mamicode.com/info-detail-2306048.html