jQueryモバイルスクロールの要素フォーカス

Question

jQueryモバイルポップアップウィジェットを使用するjQueryモバイルサイトで作業しています。ポップアップの中にはいくつかのフォーム要素があります。内容が画面に収まらない場合は、y軸をスクロールするようにポップアップを設定しました。

私が取り組んでいる問題は、ユーザーがモバイルデバイス上にあり、ポップアップの下部に向かってフォーム要素を選択し、ネイティブキーボードがユーザーが選択したフォーム要素を切り捨てるときです。

私はユーザーが要素を手動でスクロールするだけでよいことを認識していますが、そのユーザーにとってより良い体験にしたいと考えています。この問題を解決するために考えられる唯一の方法は、ユーザーが要素をフォーカスに持っていくと、各フォーム要素にプログラム的にスクロールさせることです。以下は私が作業しているコードですが、私はそれを動作させることができません。私のコンソールログには、次のエラーを示し続ける：ここ

Uncaught TypeError: Cannot read property 'top' of undefined

は、私が使用しているコードです：

$('#popup input, #popup textarea').focusin(function() { 
    var container = $('#popup'), 
    scrollTo = $(this); 

    container.scrollTop(
     scrollTo.offset().top - container.offset().top + container.scrollTop() 
    ); 
}); 

誰もこれに対する解決策を知っていますか？

Answer 1

私は間違ったターゲットを使用していました。元のコードは$(this)を使用していましたが、代わりに$(e.target)を使用していたはずです。

$('#popup input, #popup textarea').focusin(function(e) { 
     var container = $('#popup'), 
     scrollTo = $(e.target); 

     container.animate({ 
      scrollTop: scrollTo.offset().top 
     }, 300);  
}); 

このコードは途中でしか機能しませんでした。キーボードのスライドアウト時に正しいオフセットをキャプチャするために、ウィンドウのサイズ変更イベントで同じコードを使用する必要がありました