嗯，大概是产品大佬们不想让人知道这是用H5做的页面，因为禁用橡皮筋效果之后看起来就像原生native一样丝滑。。。

你可能要问了，这么烂大街的问题，网上一搜一大片，还要拿来讲？

是的，我搜到很多类似下面这样的方案：

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

我把它应用在我的项目里，确实也生效了。

但是

我的所有依赖上下滑动的功能都不能用了。比如overflow：scroll失效。

所以我寻思有没有别的办法，毕竟我一前端渣渣还没办法手写一个scroll事件。

果然，被我找到了。

最佳实践

使用 position: fixed的方式。

body {
    height: 100vh;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
}

（注：“body”只是示例，你可以修改成你需要禁用的页面的根布局样式）

按照上面这样写样式，也完全能够实现禁用橡皮筋效果。

原理应该是fixed布局是以浏览器为根节点，不依赖任何布局，即使是系统属性也无法生效。

希望你遇到类似问题时，能找到我这篇文章。

祝你成功！