html - 防止iPhone上的垂直滚动

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

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

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

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

---

Best Answer-推荐答案

您可以将“touchmove”事件绑定(bind)到其他两个 div，并使用 prevent default。

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

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

关于html - 防止iPhone上的垂直滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20136566/