发现之前阻止页面滚动的代码e.preventDefault代码失效了。于是自己折腾了一番，找到了解决办法。

一、前言

浏览器在移动端有一个默认触摸滚动的效果，让我们感触最深的莫过于微信浏览器里面，下拉时自带橡皮筋的效果。

然而在开发的时候我们经常需要阻止此效果。

在此先直接给一个方案，直接加上下面的代码即可：

document.body.addEventListener('touchmove', function (e) {
  e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false}); //passive 参数不能省略，用来兼容ios和android

如果不加passive:false,在 ios 上是不能起作用的。

二、解释

微信在 Android 端和 IOS 端使用的不是同样的浏览器内核：

• Android 版 微信浏览器 ：QQ浏览器 X5内核（相当于使用的 Chrome）

•  

• IOS 版 微信浏览器 ：WKWebView（相当于使用的Safari）

所以下面分别使用 Chrome 和 Safari 来分析。

关于浏览器内核问题，有兴趣的可以看看这个：浏览器内核总结

1. Chrome 默认的事件监听参数：

useCapture:false 表示事件采用冒泡机制（capture 译为 捕获），浏览器默认就是false；
passive:false 表示我现在主动告诉浏览器该监听器将使用e.preventDefault()来阻止浏览器默认的滚动行为（可以提高运行速度）。

2. Safari 默认的事件监听参数：

在 Safari 中，有一个更新：

Updated root document touch event listeners to use passive mode improving scrolling performance and reducing crashes
更新了根文档触摸事件侦听器，默认使用passive:true提高滚动性能并减少崩溃

所以Safari 中默认使用了passive:true，告诉浏览器，此监听事件中，不会阻止默认的页面滚动。这将导致设置的e.preventDefault()代码失效。

所以 Safari 默认是不会阻止滚动的。

3. 结论

我们通过 e.preventDefault(); 阻止默认的下拉滑动的效果，通过添加 passive:false 参数来兼容各个浏览器。即可实现阻止移动页面滚动的功能。

参考：

1. https://blog.csdn.net/q36835109/article/details/72179403

2. https://blog.csdn.net/qq_40717869/article/details/81749970

3. https://www.cnblogs.com/ziyunfei/p/5545439.html

4. https://blog.csdn.net/zsc2014030403015/article/details/52885747

5. https://blog.csdn.net/weixin_39927850/article/details/79353228

6. https://www.cnblogs.com/jasonwang2y60/p/6848464.html

7. https://www.jb51.net/article/81168.htm  javascript移动开发中touch触摸事件详解

禁止iOS的弹性滚动 微信的下拉回弹

一种方法：

html头部添加

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

然后将页面body的高度设为window的高度

 $("body").height( $(window).height() );

其他方法

页面高度超过设备可见高度时，阻止掉touchmove事件。

document.body.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);

/**
 * 禁止浏览器下拉回弹
 */
function stopDrop() {
    var lastY;//最后一次y坐标点
    $(document.body).on('touchstart', function(event) {
        lastY = event.originalEvent.changedTouches[0].clientY;//点击屏幕时记录最后一次Y度坐标。
    });
    $(document.body).on('touchmove', function(event) {
        var y = event.originalEvent.changedTouches[0].clientY;
        var st = $(this).scrollTop(); //滚动条高度
        console.log("st = "+st);
        if (y >= lastY && st <= 0) {//如果滚动条高度小于0，可以理解为到顶了，且是下拉情况下，阻止touchmove事件。
            lastY = y;
            event.preventDefault();
        }
        lastY = y;

        //方法三
        // var abc=$(document.body).scrollTop();
        // console.log("abc = "+abc);
        // if (abc>0) {
        //   $(document.body).scrollTop(0);
        // }
    });
}
stopDrop();

https://segmentfault.com/q/1010000000322091

转载于：http://www.shanhubei.com/禁止ios浏览器页面上下滚动-橡皮筋效果.html

https://www.cnblogs.com/muzhifeike/p/5871180.html