24

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

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

4

5 に答える 5

18

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

入力フィールドに追加onFocus="window.scrollTo(0, 0);"するだけで完了です。(iPad で試してみました<textarea>が<input type="text" />、iPhone でも動作すると確信しています。)

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

于 2011-09-16T23:44:24.903 に答える
7

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

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

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

2）フォーカスイベントを問題の入力フィールドにバインドします。フォーカスが合ったら、ドキュメントを現在の位置までスクロールさせます

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

タダ！煩わしい「フォーカスのスクロール」はありません

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

于 2011-10-31T02:15:31.383 に答える
3

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

詳細な背景として、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'); 
});
于 2011-11-17T00:53:52.037 に答える
0

フォーカスがプログラムで設定されている場合、これは私がすることです:

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

jQuery を使用する場合:

var savedScrollTop = $(document).scrollTop(); // save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); // restore it
于 2012-12-26T17:43:56.427 に答える