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);  
}); 

這段代碼只是工作的一部分。爲了在鍵盤滑出時捕獲正確的偏移量，我必須在窗口大小調整事件上使用相同的代碼。