javascript - IOS 滚动问题( flex 滚动和反弹)

Question

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

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

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

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

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

ontouchmove="disableElasticScroll(event)"

这没有达到预期的效果。我已经设置了一个 codepen 来突出显示这个问题。如果你有ipad，看看吧。首先将内容拖到.content 区域内。这很好用(感谢 -webkit 解决方案)。如果您然后尝试拖动 .header 或 .footer 您会注意到您无法拖动它并且没有滚动发生(同样这很好并且是由于JavaScript)，但是如果您尝试再次滚动 .content，您会注意到它会拖拽整个页面并产生 flex 滚动效果。

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