我正在为iPad应用程序开发html + css。
为了说明这个问题,我做了一个简单的假人:
<head>
<meta charset="UTF-8" />
<style>
body {
height:100%;
width:100%;
padding:0px;
margin:0px;
background:#333;
}
#container {
width:90%;
margin:0 auto;
background:#ccc;
padding:10px;
}
#footer {
position:fixed;
bottom:0px;
height:100px;
width:100%;
background:red;
text-align:center;
}
</style>
</head>
<body>
<div id="container">Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
</div>
<div id="footer">
</div>
</body>
尝试使用iPad/Safari手机,您会注意到第一次滚动页脚(红色块)。它会向上滚动到位置之外,直到您停止滚动。在您第二次尝试时,一切正常。
当您重新加载页面时,一切都会再次发生。
我认为对固定位置的支持是错误的。
有什么想法可以解决这个问题吗?也许使用 jQuery。
这是在这里遇到的相同问题吗 jQuery 移动固定页脚滚动文本一次然后在 iOS 应用程序中停止?如果是这样,似乎小黑客解决了这个问题。
我正在从事的项目也有同样的问题。而不是使用:
#footer {
position:fixed;
bottom:0px;
height:100px;
width:100%;
background:red;
text-align:center;
}
我使用了以下代码,它真的对我有用
#footer {
position:absolute;
bottom:0px;
height:100px;
width:100%;
background:red;
text-align:center;
}
上面的Jimbo发现了问题并引导我找到了答案。
它以 100 毫秒的延迟工作。
这是对我有用的最终解决方案。
function fixJqmScrollBug() {
window.scrollTo(0, 1);
setTimeout(function() {
window.scrollTo(0, 0);
}, 100);
}
$(document).ready(function() {
fixJqmScrollBug();
});