6

これを機能させるために、jquery/javscriptの「修正」に多くの時間を費やしました。IOS 用の chrome mobile の最後の更新以降、ブラウザーのアドレス バーの動作が異なります。皆さんは私が話していることを認識していると確信しています。ページを下にスクロールするとバーが隠れますが、上にスクロールすると表示されます。はい、それは優れたユーザー エクスペリエンスです。

問題は、Web アプリ (ヘッダー) の上に固定要素があり、上にスクロールするたびにアドレス バーが固定要素の上に移動することです。

他の Web アプリ (Twitter、Gmail) を調べたところ、これを回避する方法が見つかったようです。彼らがどのようにそれを達成したかについてのあなたの考えを読みたいです。固定要素を使用しないように言う必要はありません。

だから私の質問は:これを避ける方法はありますか? 状況についてどう思いますか。

例: https://mobile.twitter.com/EmWatson (できれば iPhone で見る必要があります)

参考までに: Web アプリに Jquery モバイル フレームワークを使用しています。

ありがとう。

4

1 に答える 1

2

さて、私は働く方法を見つけました。

<body style="overflow:hidden;">
    <header style="width:auto;display:block;padding:12px;text-align:center;background-color:#1276c7;color:white;position:fixed;top:0;left:0;right:0;opacity:1;">FIXED HEADER</header>
    <div role="main" style="height:100%;overflow-y:scroll;padding:60px 0;box-sizing:border-box;-webkit-overflow-scrolling: touch;">
            <article>

                  ...(content)...

            </article>
     </div>
 </body>

内側のスクロール可能な要素が必要で、body のオーバーフローを削除しているようです。私はそれを考えすぎたようです。これが誰かに役立つことを願っています。

于 2013-09-13T17:32:31.533 に答える