Jos*_*ton 25 css-position mobile-safari ios5 twitter-bootstrap
我正在使用Twitter Bootstrap来设计一个iPad优化的网站,并在iOS5的Mobile Safari中遇到一个有趣的错误.
点击固定位置导航栏中的锚链接后,它正确地将我带到该锚点.但是,在滚动页面之前,我无法单击导航栏中的任何其他链接.
问题似乎出现在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>
Rya*_*Ore 33
我感觉到你的痛苦.我花了至少6个小时试图弄清楚这个.但我做到了,至少是一个对我有用的甜蜜解决方法.
我有一个带有导航的固定标题,因为有很多标题.body/html向下滚动到它下面.(典型)
单击导航按钮后,页面会滚动并有效地杀死我的按钮,直到我用手指再次滚动我的身体.这以某种方式使我的按钮再次可点击.我尝试了一切,似乎没有人解决它,或者没有分享结果.
html :: 在我的容器div的末尾,我添加了一个空的div,没有高度/宽度
<div id="device"></div>
</div> <!--! end of #container -->
js :: 在滚动动画之前,我给div高度为200px.
$('#device').css('height', '200px');
在动画完成后,我立即走高
$('#device').css('height', '0px');
这就对了.甜蜜的黑客魔法.我希望有所帮助.如果你想要一个有效的例子, http: //ryanore.com目前我正在进行中,所以我通常不会驱动它的任何链接,但嘿,这是一个很好的理由.
| 归档时间： |
|
| 查看次数： |
43050 次 |
| 最近记录： |