防止iPhone上的垂直滚动答案

【问题标题】：Prevent vertical scroll on iphone防止iPhone上的垂直滚动
【发布时间】：2013-11-22 03:34:47
【问题描述】：

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

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

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

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

【问题讨论】：

最大高度是什么？我已经设置了固定高度。
max-height 是为最大滚动设置的？

标签： html ios iphone css

【解决方案1】：

您可以将“touchmove”事件绑定到另外两个 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() });
}

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

【讨论】：