iOS滚动问题(弹性滚动和弹跳)

Question

我已经开发了一个具有固定页脚和标头的站点。内容也是固定的（但这仅仅是因为页脚和标头可以被隐藏，但我不会在我的示例中显示）。我遇到的问题是iPhone和iPad。他们是我遇到的两个问题。曾经使我可以将标头和页脚拖到身体/html的范围上，显示了空格（不知道他们为什么这样做），另一个问题是，一旦我放开手指，它就会停止滚动。后者似乎可以解决：

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

尽管我读到这不是受支持的CSS属性，但它确实可以解决问题。我试图通过JavaScript解决的第二个问题是通过制作 header 和 footer 不可滚动的问题，但似乎无法正常工作。JavaScript足够简单：

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

我可以将其放在这样的元素上：

ontouchmove="disableElasticScroll(event)"

这没有所需的效果。我已经设置了一个代码蛋白来突出该问题。如果您有iPad，请看看。首先将内容拖动 .content 区域。效果很好（感谢-webkit解决方案）。如果您然后尝试拖动 .header 或 .footer 您会注意到您不能拖动它并且没有滚动（同样是好的）JavaScript），但是如果您尝试滚动 .content ，您将再次注意到它会拖动整个页面并执行弹性滚动垃圾。

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

Answer 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;
}

Answer 2

html, body {
 position: fixed;
}

尝试设置此CSS属性，看看它是否有效。它解决了对身体的弹性滚动效果。

样本页

输出iPad上的测试