固定位置导航栏在 iOS5 上的 Mobile Safari 中只能点击一次 [英] Fixed position navbar only clickable once in Mobile Safari on iOS5
问题描述
我正在使用 Twitter Bootstrap 来设计一个 iPad 优化网站的样式，并且在 iOS5 上的 Mobile Safari 中遇到了一个有趣的错误.
I'm using Twitter Bootstrap to style an iPad optimized website and am running up against an interesting bug in Mobile Safari on iOS5.
点击固定位置导航栏中的锚链接后，它会正确地将我带到该锚点.但是，在滚动页面之前，我无法单击导航栏中的任何其他链接.
After tapping on an anchor link in the fixed position navbar, it correctly takes me to that anchor. However, I am then unable to click on any other links in the navbar until after I have scrolled the page.
问题似乎出在 Bootstrap 本身，因为 Bootstrap 站点也有同样的问题:http://twitter.github.com/bootstrap/
The problem appears to be in Bootstrap itself, since the Bootstrap site has the same issue: http://twitter.github.com/bootstrap/
关于如何解决这个问题的任何建议?
Any suggestions for how to work around this?
下面的代码重现了该问题.请注意，如果您单击Test JS"或Test jQuery"(两种不同类型的滚动，直接 JS 或基于 jQuery)，您将无法再次单击，直到您手动移动页面.
The code below reproduces the issue. Note if you click on the "Test JS" or "Test jQuery" (two different types of scrolling, straight JS, or jQuery based) you will not be able to click again until after you manually move the page.
这是基本的演示代码(.jsp):
Here is the basic demo code(.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 个小时试图弄清楚这一点.但我做到了，至少是一个对我有用的好方法.
I feel your pain. I spent at least 6 hours trying to figure this one out. But I did, at least a sweet workaround that worked for me.
我有一个固定的标题，其中包含许多标题的导航.body/html 在其下方向上滚动.(典型)
I have a fixed header with navigation in it as many headers have. The body/html scrolls up down underneath it. (typical)
单击导航按钮后，页面滚动并有效地杀死我的按钮，直到我再次用手指物理滚动身体.这不知何故使我的按钮再次可点击.我尝试了所有方法，但似乎没有人解决它，或者没有分享结果.
After clicking a nav button, the page scrolls and effectively kills my buttons until I physically scroll my body again with my finger. This somehow makes my buttons clickable again. I tried everything and nobody seemed to have solved it , or didn't share results.
html::在我的容器 div 的末尾，我添加了一个空 div，没有高度/宽度
html:: At the end of my container div, i added an empty div, with no height/width
<div id="device"></div>
</div> <!--! end of #container -->
js::就在滚动动画之前，我给 div 高度为 200px.
js:: Just before the scroll animation, i give the div height of 200px.
$('#device').css('height', '200px');动画一结束，我就把高度拿走
immediately on complete of the animation, i take the height away
$('#device').css('height', '0px'); 就是这样.甜蜜的黑客魔法.我希望这会有所帮助.如果您想要一个工作示例，http://ryanore.com目前我正在进行中，所以我通常不会驱动任何指向它的链接，但嘿，这是为了一个好的原因.
That is it. Sweet hack magic. I hope that helps. If you want a working example, http://ryanore.com Currently I'm in progress so I wouldn't normally drive any links to it, but hey it's for a good cause.
这篇关于固定位置导航栏在 iOS5 上的 Mobile Safari 中只能点击一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
