我正在使用 Twitter Bootstrap 来设计一个 iPad 优化网站的样式，并且在 iOS5 上的 Mobile Safari 中遇到了一个有趣的错误。
点击固定位置导航栏中的 anchor 链接后，它会正确地将我带到该 anchor 。但是，在滚动页面之前，我无法单击导航栏中的任何其他链接。
问题似乎出在 Bootstrap 本身，因为 Bootstrap 站点也有同样的问题:http://twitter.github.com/bootstrap/
有关如何解决此问题的任何建议？
下面的代码重现了该问题。请注意，如果您单击“Test JS”或“Test jQuery”(两种不同类型的滚动、直接 JS 或基于 jQuery)，您将无法再次单击，直到您手动移动页面。
这是基本的演示代码(.jsp):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#testDiv {
position: fixed;
bottom: 0;
right: 0;
background: gray;
padding: 20px;
}
#jsDiv,
#jQueryDiv {
width: 200px;
display: block;
height: 40px;
background-color: red;
}
#jQueryDiv {
background-color: yellow;
}
</style>
<script type="text/javascript">
function testScroll() {
alert("JS");
scroll(0, 5000);
}
function testjqScroll() {
alert("JQuery");
$(window).scrollTop(500);
}
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
</head>
<body>
<%for (int i = 0; i < 500; i++) {%>
Line <%=i%><BR/>
<%}%>
Bottom
<div id=testDiv>
<a id="jsDiv" href="#" onclick="testScroll();return false;">Test JS</a>
<a id="jQueryDiv" href="#" onclick="testjqScroll();return false;">Test jQuery</a>
</div>
</body>
</html>
最佳答案
我感觉到你的痛苦。我花了至少 6 个小时试图弄清楚这一点。但我做到了，至少是一个对我有用的甜蜜解决方法。
我有一个带有导航的固定标题，就像许多标题一样。 body/html 在其下方向上滚动。 (典型的)
单击导航按钮后，页面滚动并有效地杀死我的按钮，直到我再次用手指物理滚动 body 。这不知何故使我的按钮再次可点击。我尝试了所有方法，但似乎没有人解决它，或者没有分享结果。
html::
在我的容器 div 的末尾，我添加了一个没有高度/宽度的空 div
<div id="device"></div>
</div> <!--! end of #container -->
js::
就在滚动动画之前，我给了 200px 的 div 高度。
$('#device').css('height', '200px');
动画完成后，我立即将高度移开
$('#device').css('height', '0px');
这就对了。甜蜜的黑客魔法。我希望这会有所帮助。
如果你想要一个工作示例，http://ryanore.com
目前我正在进行中，所以我通常不会驱动任何链接到它，但嘿，这是一个好的原因。
关于mobile-safari - 固定位置导航栏在 iOS5 上的 Mobile Safari 中只能点击一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7826868/