在 ios 上禁用弹性滚动（橡皮筋效果）答案

【问题标题】：disable elastic scrolling (the rubber band effect) on ios在 ios 上禁用弹性滚动（橡皮筋效果）
【发布时间】：2016-01-09 16:52:37
【问题描述】：

我正在努力使我的网站更加灵活和通用，适用于所有设备。但是，我在尝试适配IOS的时候遇到了一个问题，就是弹性滚动或者橡皮筋效果（当你滚动到网站结束时你仍然可以滚动它，所以你可以看到它下面的隐藏内容） .我在众多来源中寻找解决方案，但没有一个能帮助我有效地解决问题（正文中的overflow: hidden; 禁用了网页的所有滚动功能）。我想使用 html/css 或纯 JavaScript（没有 Jquery 或其他库）来解决问题。这是我的webpage

提前感谢您的帮助。

【问题讨论】：

我在 iPhone4s 上看不到这个问题。你设法解决了这个问题吗？
我已经尝试了下面答案中提供的方式，但这不是一个令人满意的解决方案。
现在问题又来了

标签： javascript html css scroll

【解决方案1】：

上述解决方案，拥有一个固定的容器是一个很好的解决方案。但有时如果您无法访问 HTML 层次结构的顶部，这可能很难应用。

因此，如果用户尝试使用 JS 滚动网站顶部，您可以禁用移动操作，例如；

var startY = 0;
document.addEventListener('touchstart', function(e) {
    startY = e.touches[0].screenY;
});

document.addEventListener('touchmove', function(e) {
    var amountMovedY = e.touches[0].screenY - startY;
    if (amountMovedY > 0) {
        e.preventDefault();
    }
  // Disable move action when movement amount is negative (user tries to positive to top!)
});

【讨论】：

【解决方案2】：

您可以在容器 div 中添加fixed 属性，使其不可滚动，然后使容器中的内容可滚动（例如，赋予文章可滚动性并将文章放入固定容器中）。这不是解决问题的最佳解决方案，尽管它对我有用。

【讨论】：