1

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モバイルで試してみると、フッター（赤いブロック）を初めてスクロールしたときに気付くでしょう。スクロールを停止するまで、位置がずれて上にスクロールします。2回目の試行では、すべてうまくいきます。

ページをリロードすると、すべてが再び発生します。

バグがあるのは、固定された位置のサポートだと思います。

これを解決する方法はありますか？おそらくjQueryで。

4

3 に答える 3

0

上記のJimboは問題を特定し、私を答えに導きました。

100msの遅延で動作しました。

これが私のために働いた最後の解決策です。

function fixJqmScrollBug() {
    window.scrollTo(0, 1);
    setTimeout(function() {
        window.scrollTo(0, 0);
    }, 100);
}
$(document).ready(function() {
    fixJqmScrollBug();
});
于 2013-01-21T08:24:08.273 に答える
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;  
}
于 2013-01-07T10:13:07.783 に答える
0

これは、 jQuery Mobile Fixed Footer Scrolls with Text One Time Then Stops in iOS App で発生した同じ問題ですか? もしそうなら、小さなハックが問題を解決したようです。

于 2012-12-10T22:36:31.873 に答える