Question

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

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

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

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

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

ontouchmove="disableElasticScroll(event)"

这没有达到预期的效果。我已经设置了一个codepen来强调这个问题。如果您有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属性并查看它是否有效。它解决了身体上的弹性滚动效果。

Sample page

Output to test on ipad

IOS滚动问题（弹性滚动和反弹）

2 个答案: