jQuery mobile faire défiler jusqu'à l'élément en surbrillance

Question

Je travaille sur un site mobile jQuery qui utilise le widget popup mobile jQuery. Dans mes popups, j'ai plusieurs éléments de formulaire. J'ai mon popup configuré pour faire défiler sur l'axe y si le contenu ne peut pas tenir sur l'écran. Le problème que je rencontre est lorsque l'utilisateur est sur un appareil mobile et sélectionne un élément de formulaire vers le bas de la fenêtre contextuelle le clavier natif coupe l'élément de formulaire que l'utilisateur vient de sélectionner.

Je me rends compte que l'utilisateur peut simplement faire défiler manuellement à l'élément à nouveau, mais, je veux que ce soit une meilleure expérience pour l'utilisateur. Le seul moyen de résoudre ce problème serait de faire défiler par programmation chaque élément de formulaire une fois que l'utilisateur a mis l'élément en évidence. Voici le code sur lequel j'ai travaillé, mais je n'arrive pas à le faire fonctionner. Mon journal de la console continue d'afficher l'erreur suivante:

Uncaught TypeError: Cannot read property 'top' of undefined

est le code J'utilise ici:

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

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

Est-ce que quelqu'un sait d'une solution à cela?

Answer 1

J'utilisais la mauvaise cible. Mon code d'origine utilisait $(this) et il aurait dû utiliser $(e.target) à la place.

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

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

Ce code n'a fonctionné qu'une partie du chemin. J'ai dû utiliser le même code sur l'événement de redimensionnement de la fenêtre afin de capturer le décalage correct lorsque le clavier glisse