J'utilise EventDefault () sur TouchStart sur le document pour éviter tout défilement sur une page. Malheureusement, cela évite trop. L'utilisateur ne peut plus donner l'accent sur une entrée (et ouvrir le clavier logiciel). Utilisation de JQuery Focus (), je peux donner l'accent sur l'entrée sur une touche tactile. Cela ouvre le clavier doux sur iOS (la plupart du temps), mais jamais sur Android.
J'ai une page Web que je veux faire autant comme une application mobile aussi possible. Je ne suis vraiment préoccupé par Android et IOS, mais n'importe quel facteur de forme. Je commence en faisant le contenu de la page exactement la même taille que la taille de l'écran. C'est bien jusqu'à ce que l'utilisateur met son doigt sur la page. J'ai besoin d'empêcher le défilement de l'utilisateur. Le code suivant l'accomplie, mais de manière légèrement différente sur les deux systèmes d'exploitation. sur iOS, cela empêche le défilement élastique: où un utilisateur peut révéler une texture derrière la Webpage en essayant de faire défiler la page. La fonctionnalité est agréable pour une page Web régulière, mais dans mon cas, il nuit à l'UX. sur Android, empêche la révélation d'un piratage pratique que j'utilise pour masquer la barre d'adresses. Les navigateurs Android commencent par la barre d'adresse visible, mais lorsque l'utilisateur fait défiler la page, il disparaît. Forcer programmatiquement le navigateur masquer la barre d'adresse, ajoutez simplement cette ligne de code à votre fonction appelée à la charge. C'est un chemin hacky (mais aussi le seul moyen de Dites au navigateur Android que nous avons défilé et que la barre d'adresse n'est plus nécessaire. sans la préventive du document, le navigateur Android autorisera le défilement et la barre d'adresse peut être révélée. Ainsi, les deux systèmes d'exploitation ont une bonne raison d'avoir ce préventif () appelé Sur chaque touche de touche sur le document, mais cela empêche trop. Tapping sur un champ de saisie ne fait rien. L'utilisation d'un appel à jQuery Focus () peut vous aider, mais n'ouvre que le clavier logiciel sur iOS, pas Android. Comment puis-je empêcher la page de faire défiler la page, Mais utilisez la fonctionnalité native du navigateur pour vous concentrer sur les champs de saisie? Remarque:
Ce code est défectueux car l'utilisateur peut toujours faire défiler la page tant que la touche initiale provient de l'intérieur du champ de saisie.
3 Réponses :
J'en ai effectivement résolu ce problème sur un autre projet, oublié à ce sujet et se souvient de cela la majeure partie de la taper en tapant cela.
Ils sont de simplement le faire sur TouchMove. P>
$(document).on('touchstart', function(e) {
if (e.target.nodeName !== 'INPUT') {
e.preventDefault();
}
});
Combinez les deux!
// prevent scrolling from outside of input field
$(document).on('touchstart', function(e) {
if (e.target.nodeName !== 'INPUT') {
e.preventDefault();
}
});
// prevent scrolling from within input field
$(document).on('touchmove', function(e) {
if (e.target.nodeName == 'INPUT') {
e.preventDefault();
}
});
La réponse simple à votre question est d'utiliser "PREVENDEFAULT" d'utiliser la propriété CSS de pointeur-Events pour désactiver le défilement de l'élément qui défile.
CSS pour vos entrées: P>
document.body.pointerEvents = 'auto';
Donc, vous changez le DOM sur chaque touchstart et sur chaque touchend. Peut-être que ce n'est pas la bonne voie, si nous considérons les performances.