Android n'est pas correctement défiler sur le focus d'entrée si pas de l'élément de corps
Lorsqu'un navigateur mobile apporte un clavier, il essaie de déplacer les barres de défilement, de sorte que l'entrée est toujours en vue.
Sur iOS Safari, il semble pour ce faire correctement, en trouvant les plus proche défilement parent.
Sur natif Android ou Chrome navigateur mobile il semble tout simplement essayer de l'élément body, puis renonce, de ce fait la concentration d'entrée est caché sous le clavier.
Comment casser
Ensemble overflow-y: hidden
sur l'élément body. Créer un défilement récipient et mettre un forme.
Lorsque vous sélectionnez un élément près du bas de votre écran, il sera obscurcie par le clavier.
Démo
http://dominictobias.com/android-scroll-bug/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>Android scroll/focus bug</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.scroll {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
}
input {
margin-bottom: 20px;
width: 100%;
}
</style>
</head>
<body>
<div class="scroll">
<input type="text" value="Input 1">
<input type="text" value="Input 2">
<input type="text" value="Input 3">
<input type="text" value="Input 4">
<input type="text" value="Input 5">
<input type="text" value="Input 6">
<input type="text" value="Input 7">
<input type="text" value="Input 8">
<input type="text" value="Input 9">
<input type="text" value="Input 10">
<input type="text" value="Input 11">
<input type="text" value="Input 12">
<input type="text" value="Input 13">
<input type="text" value="Input 14">
<input type="text" value="Input 15">
<input type="text" value="Input 16">
<input type="text" value="Input 17">
<input type="text" value="Input 18">
<input type="text" value="Input 19">
<input type="text" value="Input 20">
</div>
</body>
</html>
Toutes les idées de comment résoudre ce problème? Aurez-vous besoin de certains détection du navigateur et de désordre de hacks?
<div class="scroll">
OriginalL'auteur Dominic | 2014-05-20
Vous devez vous connecter pour publier un commentaire.
C'est un bug dans le navigateur natif Android. Par ailleurs, l'entrée pour arriver dans la vue après un caractère est tapé sur le clavier.
L'extrait de code suivant placé quelque part dans la page devrait vous aider:
Notez que Android 4.4 et 5 a besoin de ce trop, pas seulement "4.[0-3]"
Sur une page que je suis en train de travailler sur, l'entrée serait défile dans l'affichage correctement sur 95% du temps, mais de temps en temps, il semblait ne pas défiler à tous. (Version de Chrome 43 sur Android 5.1). scrollIntoViewIfNeeded semble forcer le nécessaire, faites défiler jusqu'à se produire dans ces cas. Alors peut-être que le bug est également visible dans google Chrome sur Android? La question d'origine aussi mentionne à la fois le stock navigateur Android et Chrome.
MDN dit de ne pas l'utiliser dans la production > developer.mozilla.org/en-US/docs/Web/API/Element/...
Vous devriez plutôt
document.activeElement.scrollIntoView()
ce qui est mieux pris en charge par d'autres navigateurs aussi.OriginalL'auteur Serge
La réponse de Serge est grande, mais j'ai eu quelques modifications que l'amélioration pour moi.
Le problème est apparu sur Android 6 pour moi, donc je l'ai ajouté à la vérifier et j'ai besoin de la correction du travail de ces zones de texte ainsi que des entrées.
Si quelqu'un a besoin de la correction Angulaire 1, voici ce que j'ai utilisé il.
resize
événement, parce que pour un écran mobile jamais il ne sera redimensionnée à droite ?Sur android clavier d'ouverture déclenché l'événement resize. Je ne crois pas redimensionner est déclenchée sur iOS avec le clavier de l'ouverture, mais nous avons juste besoin de fixer android ici.
OriginalL'auteur Zack Huston
Offrant une légère révision si il sauve quelqu'un certain temps:
MDN déconseille
.scrollIntoViewIfNeeded
bc de l'incompatibilité du navigateur =>.scrollIntoView
est une pratique de substitution avec un peu plus de compatibilité avec les navigateurssetTimeout
est vraiment besoin, j'ai testé de cette façon, il est plus stable!OriginalL'auteur Derek Mueller
En regardant un peu différemment le bug semble être causé par la fonctionnalité des Suggestions du navigateur. Comme je ne veux pas vraiment les suggestions de toute façon j'ai utilisé:
qui donne une expérience beaucoup plus lisse.
OriginalL'auteur Ben Trewern