0

navbariOS でも、Bootstrap はポジショニングによってウィンドウの上部にとどまっていることに気付きましたfixed。iOSスクロールを再実装しないとこれは不可能だと思っていたにもかかわらず？

これがどのように機能するのか、自分の見解でどうすればよいのか疑問に思っていました。私が試したことは何もないようです-スクロール中にdivがずれ、スクロールが終了した後にのみ位置にジャンプします。

編集：これは最小限の（っぽい！）例です。fixedThing下にスクロールすると、iOS でジャンプする様子をご覧ください。おそらく、それはnavbar?

<html>
    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            @import url('http://getbootstrap.com/dist/css/bootstrap.css');

            .fixedThing {
                position: fixed;
                width: 100%;
                height: 100%;
                background: red;
                opacity: 0.5;
            }

            .navbar {
                width: 100%;
            }
        </style>

        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

    </head>
    <body>

        <div class="navbar navbar-inverse navbar-fixed-top">

        </div>

        <div class="fixedThing"></div>

        <p>...insert lots of page content so it scrolls ...</p>

    </body>
</html>

http://jsfiddle.net/D5cZj/

4

1 に答える 1

2

iOS 5position: fixedがサポートされているため: http://caniuse.com/#search=fixed

さらにヘルプが必要な場合は、既に試したことを示す必要があります。

編集：

問題は、ブラウザのナビゲーション バーが表示されなくなるまで、最初にページ全体を移動してから、段落内のコンテンツの移動を開始することです。

この問題を回避するwindow.scrollTo(0, 1); には、iPhone / HTML5 でナビゲーション バーを完全に非表示にする方法を試すことができます。

ただし、ユーザーが一番上までスクロールして (ナビゲーション バーが表示されるように)、下に戻ると、問題が再び発生します。

編集2：

css を次のように変更した場合:

body {
    height: 100%;
    overflow: scroll;
}

.fixedThing {
    position: fixed;
    width: 100%;
    height: 150%;
    background: red;
    opacity: 0.5;
}

.navbar {
    width: 100%;
}

それは問題を改善するでしょう。

于 2013-08-11T13:44:53.557 に答える