Question

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

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

我尝试将主包装器的高度设置为非常短的（300px），所以理论上不管是否有溢出设置都不需要滚动页面，但它仍然滚动。我也试过访问this very short page，甚至在模拟器中它滚动了一点。我也尝试将我的标题设置为位置：已修复但没有运气。

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

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

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

防止iPhone上的垂直滚动

1 个答案: