jquery - 入力のフォーカス時にコンテナがスクロールしないようにするにはどうすればよいですか?

Question

垂直スクロールバーのない div を含み、入力が部分的に表示されています。この入力にフォーカスすると、含まれている div が上に移動し、ヘッダーが部分的に消えます。

このシナリオは、次の jsfiddle の例で再現できます。

http://jsfiddle.net/3gqP9/6/

入力を部分的に隠しておくソリューションはありますか?

Answer 1

もちろん。部分的に非表示のフィールドにフォーカスしたい理由はわかりませんが、フィドルからコードに追加します。

$('#btn').on('click', function(){
   $('#inputField').focus();
   $("#scrollable").scrollTop(0);
});

デモ: http://jsfiddle.net/3gqP9/8/

または、.scrollTop()(パラメーターなし) を使用して、フォーカスを設定する前にスクロール位置を取得し、呼び出し後に同じ位置に戻すことができ.focus()ます。