防止在iphone上垂直滚动

Question

我有一个移动网站，它有一个主包装器，里面有三个div-所有的都是固定高度，总共480像素。里面最上面的两个div是很短的标题，最下面的一个是主要内容所在的地方，有一个溢出的滚动。我将html和body设置为overflow-y:hidden。我只希望主内容div垂直滚动，而不希望其他内容，使标题始终完整可见。

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

我试着将主包装的高度设置为很短（300px），所以理论上不需要滚动页面，不管溢出设置如何，但它仍然会滚动。我也试着访问这个很短的页面，即使在模拟器中，它也会滚动一点。我还试着把我的头球打到合适的位置：固定了，但没有运气。

如何使页面停止从页眉滚动？

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

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