ページのスクロールを防ぐために、ドキュメントのtouchstartでpreventDefault()を使用します。残念ながら、これはあまりにも多くを防止します。ユーザーはもはや入力にフォーカスを合わせることができなくなります(ソフトキーボードを開く)。 jQueryのfocus()を使用して、タッチスタートの入力にフォーカスを当てることができます。これは、iOS(ほとんどの場合)ではソフトキーボードを開きますが、Androidでは決して使用しません。入力フォーカスを妨げずにモバイルブラウザでのスクロールを防止する
背景:
は、私はできるだけモバイルアプリのようにしたいWebページを持っています。私はAndroidとiOSにのみ関心がありますが、フォームファクターはどれも重要です。私は、ページ内のコンテンツを画面サイズとまったく同じサイズにすることから始めます。これはユーザーが指をページに置くまでうまくいく。私はユーザーのスクロールを防ぐ必要があります。次のコードは、これを実現しますが、2つのオペレーティングシステムでは若干異なる方法で行います。 iOSの上で
$(document).on('touchstart', function(e) {
e.preventDefault();
});
、これは弾性スクロール防止:ユーザーがページをオフにスクロールしようとすることにより、Webページの後ろにテクスチャを明らかにすることができます。この機能は通常のWebページにはいいですが、私の場合はUXからの影響がありません。
Androidでは、アドレスバーを非表示にする便利なハッキングの啓示を防止します。 Androidブラウザはアドレスバーが表示された状態から開始しますが、ユーザーがページを下にスクロールすると消えます。プログラムで強制的にブラウザにアドレスバーを非表示にするには、loadで呼び出された関数にこのコード行を追加するだけです。
$('html, body').scrollTop(1);
これはハック(だけでなく、唯一の)私たちがスクロールしなかった、とアドレスバーがもはや必要ではAndroidのブラウザを伝えるための方法です。
ドキュメントのpreventDefaultがないと、Androidブラウザでスクロールが許可され、アドレスバーが表示されます。
したがって、両方のOSには、ドキュメント上のすべてのタッチスタートでこのpreventDefault()を呼び出すのが良い理由がありますが、あまりにも多くのことを防ぎます。入力フィールドをタップすると何も行われません。 jQuery focus()の呼び出しを使うと、AndroidではなくiOS上のソフトキーボードだけが開くようになります。
$('input').on('touchstart', function() {
$(this).focus();
});
どのように私は、スクロールからページを防ぐが、入力フィールドにフォーカスを与えるために、ブラウザのネイティブ機能を使用することができますか?
注: このコード
$(document).on('touchstart', function(e) {
if (e.target.nodeName !== 'INPUT') {
e.preventDefault();
}
});
ユーザーはまだ限り、初期タッチが入力フィールド内に由来するように、ページをスクロールすることができますので、欠陥があります。
ですから、各touchstartに、各touchendにDOMを変更しています。私たちがパフォーマンスを考えれば、これは軽い方法ではないかもしれません。 –