html - 防止iPhone上的垂直滚动
<p><p>我有一个移动网站，其中有一个包含三个 div 的主包装器 - 所有的高度都是固定的，总高度为 480 像素。里面的前两个 div 是非常短的标题，底部是主要内容所在的位置，并且有一个溢出-y 滚动。我将 html 和 body 设置为 overflow-y:hidden。我只希望主要内容 div 垂直滚动，完全没有其他内容，使标题始终完整可见。 </p>
<p>当我在我的桌面浏览器中查看它时，它工作正常。在我的 iPhone 模拟器中，如果我在该内容 div 中单击并拖动它，它会正确滚动，但如果我从其中一个标题单击并拖动，或者我用两根手指在触控板上滑动，它会滚动整个页面，而不仅仅是内容。这会导致顶部标题滚出页面。我没有真正的 iphone 来测试，但我的客户告诉我，同样的事情发生在她的 iphone 上。</p>
<p>我尝试将主包装器的高度设置为非常短的值(300 像素)，因此理论上无论溢出设置如何都不需要滚动页面，但它仍然会滚动。我也尝试访问<a href="http://www.topsite.com/goto/dwarfurl.com" rel="noreferrer noopener nofollow">this very short page</a>甚至在模拟器中它也会滚动一点。我还尝试将标题设置为 position:fixed 但没有运气。</p>
<p>如何让页面停止滚动远离标题？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>您可以将“touchmove”事件绑定(bind)到其他两个 div，并使用 prevent default。</p>
<pre><code><div id="main-wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</code></pre>
<p>使用jQuery和</p>
<pre><code>jQuery(function($) {
$("#header").on(‘touchmove’, function(e) { e.preventDefault() });
$("#footer").on(‘touchmove’, function(e) { e.preventDefault() });
}
</code></pre>
<p>这将阻止浏览器执行其默认行为。</p></p>
<p style="font-size: 20px;">关于html - 防止iPhone上的垂直滚动，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/20136566/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/20136566/
</a>
</p>
页:
[1]