6

全て、

非常に「背の高い」フォームを含む Web アプリケーションに取り組んでいます。(高さとは、通常の画面よりも数百パーセント高いことを意味します)。

このデザインでは、フォーム内のユーザーの位置に関係なく、常に表示される画面の下部に固定された「フッター」が必要です。

つまり、ユーザーがフォームの上部、中央、または下部の近くにいるかどうかに関係なく、フッターが表示され、フォームはその「下」でスクロールする必要があります。

これを実装するために、フッターを 、position:fixed、およびの div として作成しましたbottom:0。

これは、iOS5 の Safari を含む、私がテストしたすべてのブラウザーで完全に機能します。

1つのバグがあることを除いて...

ユーザーがフォームの上部近くにいて、テキスト フィールドの 1 つにフォーカスを移すと、予想どおり、iOS はキーボードを表示します。

ユーザーが [次へ] ボタンをクリックするたびに、iOS はユーザーを次のフィールドに「タブ」で移動します。

彼女が [次へ] を繰り返しクリックしてフォームを下に進むと、iOS はフォームを自動的に「上にスクロール」するため、フォーム上の彼女の位置は表示されたままになります。

ただし、iOS はフッター div の位置を更新していないようですposition:fixed。フォームの残りの部分と一緒に誤ってスクロールアップします。

ユーザーがキーボードを閉じた場合、div は「適切な」場所に復元されるため、これは回復不能なエラーではありません。しかし、フッターがまったく動くという事実は、明らかな問題です。

これは、iOS の実装のバグまたは欠点position:fixedですか? または、私が間違っていることがありますか？

よろしくお願いします！

[アップデート]

position:fixedRemy Sharp (適切な名前) は、iOS/Safariのさまざまなバグや問題について、優れた詳細な記事を書いています: http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling -on-ios/ . position:fixediOSユーザー向けのサイトでの利用を考えている方は必読です...

4

4 に答える 4

2

jQueryを使用していますか？もしそうなら、私はこの作品のようなものがうまくいくと思います：

$(":input").focus( function() {
  $(window).scrollTop( $(window).scrollTop() + 1 );
});

新しいフォーム要素にフォーカスした後、ページを 1px スクロールすると、固定要素の bottom 属性がリセットされます。

于 2012-05-23T22:33:43.937 に答える
2

iOS の初期のバージョンでは元々サポートされていなかったことは知っていposition:fixedますが、iOS5 でサポートされていることは知っていますが、過去に問題がありました。フッターがある種のコントロール バーである場合、CSS スティッキー フッターを使用することをお勧めします。そうすれば、すべてのページ/コンテンツをdivこの上にロードできます。

于 2012-05-23T22:32:02.173 に答える
1

これが修正です。フッターが飛び回ることはありません。

  1. 最初に、ヘッダーと本文/セクションを div でラップします。そのdivをスクロール可能にします。
  2. フッターを絶対に配置し、他のすべてのものを相対的に配置するよりも。
  3. 固定高さを追加します。

http://yinnetteolivo.com/footerbottom.htmlで動作していることを確認してください。

どういたしまして ：）

于 2012-05-25T00:09:33.663 に答える
0

このバグについて私が見つけた他の答えはどれも私にはうまくいきませんでした。ページを34px上にスクロールするだけで修正できました。これは、モバイルサファリが下にスクロールする量です。jqueryで：

$('.search-form').on('focusin', function(){
    $(window).scrollTop($(window).scrollTop() + 34);
});

これは明らかにすべてのブラウザで有効になりますが、iOSでの破損を防ぎます。

于 2012-08-30T16:52:22.587 に答える