位置固定 #footer语言 - 移动 Safari (iPad) 越野车行为



我正在为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();
}); 

最新更新