25

私はTwitterBootstrapを使用してiPadに最適化されたWebサイトのスタイルを設定しており、iOS5のMobileSafariの興味深いバグに直面しています。

固定位置のナビゲーションバーでアンカーリンクをタップすると、そのアンカーに正しく移動します。ただし、ページをスクロールするまで、ナビゲーションバーの他のリンクをクリックすることはできません。

Bootstrapサイトにも同じ問題があるため、問題はBootstrap自体にあるようです：http ：//twitter.github.com/bootstrap/

これを回避する方法について何か提案はありますか？

以下のコードは問題を再現しています。「TestJS」または「TestjQuery」（2つの異なるタイプのスクロール、ストレートJS、またはjQueryベース）をクリックすると、ページを手動で移動するまで再度クリックできないことに注意してください。

基本的なデモコード（.jsp）は次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style type="text/css">
            #testDiv {
                position: fixed;
                bottom: 0;
                right: 0;
                background: gray;
                padding: 20px;
            }
            #jsDiv,
            #jQueryDiv {
                width: 200px;
                display: block;
                height: 40px;
                background-color: red;
            }
            #jQueryDiv {
                background-color: yellow;
            }
        </style>
        <script type="text/javascript">
            function testScroll() {
                alert("JS");
                scroll(0, 5000);
            }
            function testjqScroll() {
                alert("JQuery");
                $(window).scrollTop(500);
            }
        </script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
    </head>
<body>
    <%for (int i = 0; i < 500; i++) {%>
    Line <%=i%><BR/>
    <%}%>
    Bottom
    <div id=testDiv>
        <a id="jsDiv" href="#" onclick="testScroll();return false;">Test JS</a>
        <a id="jQueryDiv" href="#" onclick="testjqScroll();return false;">Test jQuery</a>
    </div>
</body>
</html>
4

3 に答える 3

33

あなたの痛みが分かります。これを理解するのに少なくとも6時間費やしました。しかし、少なくとも私にとってはうまくいった甘い回避策でした。

多くのヘッダーにあるように、ナビゲーション付きの固定ヘッダーがあります。body/html はその下にスクロールアップします。（典型的）

ナビゲーション ボタンをクリックすると、ページがスクロールし、指で体を物理的に再びスクロールするまで、ボタンを効果的に無効にします。これにより、どういうわけかボタンが再びクリック可能になります。私はすべてを試しましたが、誰もそれを解決していないようでしたか、結果を共有していませんでした.

html:: コンテナdivの最後に、高さ/幅のない空のdivを追加しました

   <div id="device"></div>

</div> <!--! end of #container -->

js:: スクロール アニメーションの直前に、div の高さを 200px にします。

$('#デバイス').css('高さ', '200px');

アニメーションが完了するとすぐに、高さを取り除きます

$('#device').css('height', '0px');

それだ。甘いハック マジック。それが役立つことを願っています。実際の例が必要な場合は、 http://ryanore.com 現在進行中なので、通常はリンクを張ることはしませんが、それは正当な理由のためです。

于 2012-04-05T14:11:03.173 に答える
2

ここに解決策があります: http://xybrary.appspot.com/。

これが最高だと言っているわけではありませんが、他にもっと良いものを見つけることができませんでした. iOS 5.1 で彼の Web サイトにアクセスして @Ryan Ore のソリューションを試しましたが、彼の問題はまったく修正されていません。

基本的に、2 つの固定 navbar が作成されました。1 つ目は固定配置で z-index が大きく、2 つ目は絶対配置で z-index が低くなっています (もちろん、CSS クラスは異なります)。したがって、オリジナルと複製は互いの上にレイヤー化されます。

于 2012-06-22T12:45:41.653 に答える
-2

同じ問題がありました。padding-top少なくともタグまたはバーの直前の要素 (navbar または topbar)に適用する必要があります40px。<body>

于 2011-12-29T19:53:13.920 に答える