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

时间:2012-12-07 12:33:10

标签: jquery ipad position mobile-safari fixed

我正在为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。

3 个答案:

答案 0 :(得分:0)

这是jQuery Mobile Fixed Footer Scrolls with Text One Time Then Stops in iOS App遇到的同一问题吗?如果是这样,小黑客似乎解决了这个问题。

答案 1 :(得分:0)

与我正在进行的项目有同样的问题。而不是使用:

#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;  
}

答案 2 :(得分:0)

Jimbo上面确定了问题并引导我回答。

它延迟了100毫秒。

这是最终的解决方案,对我有用。

function fixJqmScrollBug() {
    window.scrollTo(0, 1);
    setTimeout(function() {
        window.scrollTo(0, 0);
    }, 100);
}
$(document).ready(function() {
    fixJqmScrollBug();
});