IOS 滚动问题（弹性滚动和弹跳）答案

【问题标题】：IOS scrolling issues (elastic scroll and bounce)IOS 滚动问题（弹性滚动和弹跳）
【发布时间】：2017-09-22 16:15:24
【问题描述】：

我开发了一个具有固定页脚和页眉的网站。内容也是固定的（但这只是因为页脚和页眉可以隐藏，但我不会在我的示例中显示）。我遇到的问题是 iPhone 和 iPad。这是我遇到的两个问题。曾经是它允许我将页眉和页脚拖过显示空白的正文/html 的范围（不知道他们为什么这样做），另一个问题是一旦我松开手指，它就会停止滚动。后者似乎可以通过这样做来解决：

overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;

虽然我已经读到这不是受支持的 CSS 属性，但它似乎确实可以解决问题。第二个问题我试图通过使 header 和 footer 不可滚动来使用 JavaScript 解决，但它似乎无法正常工作。 JavaScript 很简单：

function disableElasticScroll(e) {
    e.preventDefault();
};

我可以把它放在这样的元素上：

ontouchmove="disableElasticScroll(event)"

这并没有达到预期的效果。我已经设置了一个代码笔来突出这个问题。如果你有ipad，看看。首先将内容拖到 .content 区域内。这很好用（感谢 -webkit 解决方案）。如果您然后尝试拖动 .header 或 .footer 您会注意到您无法拖动它并且没有发生滚动（再次这很好，是由于JavaScript），但是如果您尝试再次滚动 .content，您会注意到它会拖动整个页面并执行弹性滚动垃圾。

https://codepen.io/r3plica/pen/LzRQaZ

【问题讨论】：

我原以为很多人都能回答这个问题....我的描述不够好吗？ :(

标签： javascript html ios css

【解决方案1】：

有一种方法可以做到这一点，这样您就不必修复滚动容器。尝试使用固定位置定位页眉和页脚，然后将页面主体填充这些元素的高度。这样，您的页面将正常滚动而不会受到任何黑客攻击。它可能看起来像这样：

body {
    padding-top: 60px;
    padding-bottom: 40px;
}
header.global {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
}
footer.global {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
}

【讨论】：

我今天会试一试，如果可行的话，将其标记为答案

【解决方案2】：

html, body {
 position: fixed;
}

尝试设置这个 css 属性，看看它是否有效。解决了body的弹性滚动效果。

Sample page

Output to test on ipad

【讨论】：