web-dev-qa-db-ja.com

iPhoneで<input>要素が画面をスクロールできないようにしますか？

Webページにいくつかの<input type="number">要素があります。私はjQTouchを使用しており、常にフルスクリーンを維持しようとしています。つまり、水平スクロールは良くありません。 <input>要素をクリックすると、ページが右にスクロールし、画面の右側に黒い境界線が表示され、すべての中心がずれます。入力は画面の左からオフセットされ、ページの中央に向かってどこかで始まります。

このフォーカスのスクロールを防ぐにはどうすればよいですか？

javascriptiphoneweb-applicationssafarijqtouch
24
Stefan Kendall

私はこの記事でこの問題の解決策を見つけました フォーカスからページのスクロールを停止する

入力フィールドにonFocus="window.scrollTo(0, 0);"を追加するだけで完了です。 （iPadでは<textarea>と<input type="text" />を試してみましたが、iPhoneでも動作することは間違いありません。）

スクロールがちらつきのように見えるのではないかと心配でしたが、幸い、そうではありませんでした。

17
Mischa Magyar

これは、iPhone（モバイルSafari）でこれを解決する方法です（jQueryを使用しました）。

1）現在のスクロール位置を保持するグローバル変数を作成し、ユーザーがビューポートをスクロールするたびに更新されます

var currentScrollPosition = 0;
$(document).scroll(function(){
    currentScrollPosition = $(this).scrollTop();
});

2）問題の入力フィールドにフォーカスイベントをバインドします。フォーカスされている場合、ドキュメントを現在の位置までスクロールします

$(".input_selector").focus(function(){
    $(document).scrollTop(currentScrollPosition);
});

たダー！煩わしい「フォーカスのスクロール」は不要

注意点の1つは、入力フィールドがキーパッドの上にあることを確認してください。そうしないと、フィールドが非表示になります。これは、if句を追加することで簡単に軽減できます。

7
Maurice

IOSは入力要素にフォーカスがあるときにページオフセットプロパティをアニメーション化するため、window.scrollTo（0,0）だけでなく、jQuery.animate（）メソッド 上記にリンク の使用をお勧めします。 window.scrollTo（）を一度だけ呼び出すと、このネイティブアニメーションのタイミングでは機能しない場合があります。

背景については、iOSがpageXOffsetのpageYOffsetおよびwindowプロパティをアニメーション化しています。これらのプロパティを条件付きでチェックして、ウィンドウがシフトした場合に応答することができます。

if(window.pageXOffset != 0 || window.pageYOffset != 0) {
  // handle window offset here
}

したがって、前述のリンクを拡張すると、これはより完全な例になります。

$('input,select').bind('focus',function(e) { 
  $('html, body').animate({scrollTop:0,scrollLeft:0}, 'slow'); 
});
3
cacheflowe

プログラムによってフォーカスが設定されている場合、これは私が行うことです：

フォーカスを変更する前に、ウィンドウのscollTop値を保存します。次に、フォーカスを設定した直後に、scrollTopを保存した値に戻します。

JQueryを使用している場合：

var savedScrollTop = $(document).scrollTop(); // save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); // restore it
0
Himanshu P