Empêcher le défilement de la page lors du changement de focus

Question

Je suis novice en matière de développement et de web mobile. Mon application utilise jquery-mobile, phonegap et Compass (scss).

J'ai un problème sur ma page de connexion :

Le logo et les champs sont contenus dans des conteneurs "div" standard (data-role="content" data-type="vertical"). L'arrière-plan est coloré.

lorsque l'on passe du champ "login" au champ "mot de passe", la page se déplace vers le haut, ce que je ne souhaite pas. Je voudrais que mon logo et mes champs restent en place, comme sur la page de connexion de l'application Skype iOS.

voici ce qui se passe :

J'ai essayé plusieurs astuces, en essayant de bloquer les événements de défilement, ou en forçant la page à défiler à 0,0, sans succès.

Je pense maintenant à une nouvelle stratégie, peut-être en utilisant le positionnement relatif supérieur pour le logo et les champs, et en récupérant les événements de focus pour faire défiler la page moi-même, lors du glissement du clavier vers le haut (en animant les coordonnées de positionnement relatif supérieur).

Bien que cela semble faisable, je me demande si c'est le type de contournement utilisé par l'équipe de l'application Skype iOS...

Tout conseil sur les techniques utilisées dans ce cas particulier est le bienvenu !

Santé,

Fred

Answer 1

Après avoir cherché à plusieurs endroits, je n'ai pas trouvé la meilleure solution pour ce problème. J'ai essayé ma propre solution de contournement qui fonctionne bien pour empêcher le défilement vers l'élément ciblé, et j'aimerais donc la partager ici.

L'idée est que je bloque l'ensemble body avec position: fixed lorsqu'un utilisateur se concentre sur mes éléments ciblés. Et puis, immédiatement, je supprime ce blocage avec setTimeout (Je m'appuie sur Boucle d'événement )

Voici mon exemple de code

Version Javascript

function blockScroller(event) {
  const body = document.getElementsByTagName("body")[0]
  body.classList.add("scroller-blocker")

  setTimeout(() => {
    body.classList.remove("scroller-blocker")
  })
}

select {
  width: 200px;
  height: 55em;
  overflow: auto;
}

.scroller-blocker {
  position: fixed;
  height: 100%;
}

<br><br><br><br><br><br><br><br><br>
<select multiple onfocus="blockScroller(event)">
  <option selected="">Lorem</option>
  <option selected="">ipsum</option>
  <option selected="">dolor</option>
  <option selected="">sit</option>
  <option selected="">amet</option>
  <option selected="">Lorem</option>
  <option selected="">ipsum</option>
  <option selected="">dolor</option>
  <option selected="">sit</option>
  <option selected="">amet</option>
</select>

Version de jQuery

function blockScroller(event) {
  const body = $("body")
  body.addClass("scroller-blocker")

  setTimeout(() => {
    body.removeClass("scroller-blocker")
  })
}

select {
  width: 200px;
  height: 55em;
  overflow: auto;
}

.scroller-blocker {
  position: fixed;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br>
<select multiple onfocus="blockScroller(event)">
  <option selected="">Lorem</option>
  <option selected="">ipsum</option>
  <option selected="">dolor</option>
  <option selected="">sit</option>
  <option selected="">amet</option>
  <option selected="">Lorem</option>
  <option selected="">ipsum</option>
  <option selected="">dolor</option>
  <option selected="">sit</option>
  <option selected="">amet</option>
</select>

Pour la comparaison, voici la version sans la solution de contournement ci-dessus

select {
  width: 200px;
  height: 55em;
  overflow: auto;
}

.scroller-blocker {
  position: fixed;
  height: 100%;
}

<br><br><br><br><br><br><br><br><br>
<select multiple>
  <option selected="">Lorem</option>
  <option selected="">ipsum</option>
  <option selected="">dolor</option>
  <option selected="">sit</option>
  <option selected="">amet</option>
  <option selected="">Lorem</option>
  <option selected="">ipsum</option>
  <option selected="">dolor</option>
  <option selected="">sit</option>
  <option selected="">amet</option>
</select>