html - 防止在 iPhone 上垂直滚动

Question

我有一个移动网站，它有一个主包装器，里面有三个 div - 所有高度都是固定的，总计 480 像素。里面顶部的两个 div 是非常短的标题，底部的是主要内容所在的地方，并且有一个 overflow-y 滚动。我将 html 和 body 设置为 overflow-y:hidden。我只希望主要内容 div 垂直滚动，绝对没有其他内容，让标题始终完整可见。

当我在桌面浏览器中查看它时，它工作正常。在我的 iPhone 模拟器中，如果我在该内容 div 中单击并拖动，它会正确滚动，但如果我从其中一个标题单击并拖动，或者我用两根手指在触控板上滑动，它会滚动整个页面，而不仅仅是内容。这会导致顶部标题滚出页面。我没有真正的 iPhone 可以测试，但我的客户告诉我，同样的事情发生在她的 iPhone 上。

我尝试将主包装器的高度设置为非常短的值 (300px)，因此理论上无论溢出设置如何都不需要滚动页面，但它仍然会滚动。我也尝试访问 this very short page甚至在模拟器中它也会滚动一点。我还尝试将标题设置为 position:fixed 但没有成功。

如何让页面停止滚动远离标题？

Answer 1

您可以将“touchmove”事件绑定(bind)到其他两个 div，并使用防止默认值。

<div id="main-wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

使用jQuery和

jQuery(function($) {
   $("#header").on(‘touchmove’, function(e) { e.preventDefault() });
   $("#footer").on(‘touchmove’, function(e) { e.preventDefault() });
}

这将阻止浏览器执行其默认行为。