Éviter de dialogue sur mobile, l'écran de défilement du corps
J'affiche une boîte de dialogue sur un écran mobile, plus long que la taille de l'écran (alors qu'il défile).
Voici le problème: Lorsque vous faites défiler passés au bas de la boîte de dialogue (il m'arrive d'être en utilisant Bootstrap 3), on peut s'attendre à tout arrêter. Au lieu de cela, il commence à défiler le sous-jacent corps. J'ai essayé tout ce qui a été suggéré dans cette solution recommandée, et il n'est toujours pas foutu de travail!
Voici une démonstration en direct de l'émission sur JSbin, pour votre plus grand plaisir
Remarque: Pour reproduire le problème, l'accès à l'aide d'un mobile - mobile - et de tenter de défilement-delà de la fin de la boîte de dialogue. Essayé sur les terminaux Android et de l'iPhone ne fonctionne pas non plus.
Merci!
- Dans le navigateur par défaut sur mon HTC One, le problème occours. Mais pas dans Google Chrome sur le téléphone.
- semble être l'exception. Je l'ai essayé sur Chrome sur iOS7 sur mon iPhone 4S et j'ai eu le problème. Le navigateur par défaut sur la S3 de Samsung présente également ce problème.
- Tout comme un test, si vous n'avez pas d'affichage du sous-jacente du corps pendant l'affichage de l'modal? (au lieu d'afficher une image de référence)
- c'est faisable, mais ça a l'air hacky. Le contenu est dynamique, j'avais besoin de trouver une façon de le faire est de prendre un instantané avant de la main.
- Pourquoi le modal.sur pas tiré dans jsBin ? Avez-vous des reaso pour que
- il est tiré. Il n'a tout simplement pas avoir un effet sur le corps, pour quelque raison - et il défile toujours, peu importe (d'où la question)
- J'ai un travail, mais ne sais pas Vous accepter ou pas. Devrez ajouter un peu d'extrait de code. Un peu plus de codage. 🙂
- essayez de moi .. je suis désespérée, dans le cas où vous ne pouvez pas le dire 😉
- 🙂 à la rescousse mec . Pourriez avoir quelques légers effets secondaires . Peuvent être fixés bien 🙂 mais les grands problème est résolu. 🙂
- essayez ceci . 🙂 laissez-moi savoir si cela résout le problème. J'ai encore des bugs . Mais pas liées à la question 🙂 fiddle.jshell.net/aRUbZ/42/show
- Défile toujours le corps sur mon iPhone 4S / iOS7 navigateur Safari 🙁
- Ne se passe pas dans ma note 8 🙁 ne pas avoir d'iphone ou d'ipad 🙁
- mauvais vérifier à partir de l'ipad et laissez vous savez . Je suppose que certains événements manquants . 🙂
- essayez de fermer le popup si il charge dès que la page est en place et en l'ouvrant de nouveau
- On dirait que vous n'avez pas réglé le
viewport
<meta>
tag. Qui pourrait être la cause de ce problème. C'est aussi pourquoi je préfère utiliser JSBin (car vous pouvez définir lemeta
balises directement) - ok alors malade donner un js bi essayer 🙂
- jsbin.com/IqUrov/1 vérifier et laissez-moi maintenant si vous travaillez dans un iphone ou n'importe quel appareil ios de la vôtre . Tenant compte de l'ensemble de la fenêtre d'affichage et les balises meta de ur le code 🙂
- Œuvres! Semble fou hacky bien - nloko la réponse ci-dessous pin le problème à la racine. Merci
- position : fixed bien fait écran fliker dans mon onglet 🙂 lorsque vous essayez de les faire défiler .
- Mec, vous a accepté et a même reçu la prime à l'un des torts de réponse. 50 000 de l'utilisateur de la déclaration que vous faites vais aller à 25000 seulement 😛 essayer dans android la même fissure que vous avez accepté.
Vous devez vous connecter pour publier un commentaire.
Essayez ceci:
Fonctionne pour moi (voir http://jsbin.com/aXoMaGo/2) dans Safari/Chrome sur iOS 7 et donne également le Modal sexy rebondir effet.
Solution qui fonctionne (même lorsque la boîte de dialogue fermée): https://jsbin.com/aXoMaGo/6 . Le seul inconvénient est qu'il défile en haut de la page à chaque fois que le modal est rejeté.
J'ai eu un problème similaire. Généralement overflow:hidden accomplit sur le bureau. Pour mobile, vous aurez également besoin d'appliquer position fixe. Ainsi, lorsque votre boîte de dialogue est active, ajouter un ".noscroll" classe pour le corps:
Un problème, c'est que votre événement noms sont hors de Bootstrap 3. Une autre est que le mobile, basé sur webkit, les navigateurs ne semblent pas obéir à
overflow: hidden
sur le<body>
. Essayez ceci:genius
! Je vous remercie.Pour tous ceux Depuis que je ne suis pas stisfied avec la Réponse, il ne fonctionne pas sur mon note 8 . l'écran gèle .
Voici le hack, j'ai créé buggy mais résout le problème majeur 🙂
js bin
Toutes les précisions sont les bienvenues 🙂
Il n'a pas grande prise en charge du navigateur, mais l'option la plus facile est d'utiliser le
overscroll-behavior
propriété CSS sur le popup.Cette propriété a été ajoutée à CSS spécialement pour ce cas d'utilisation.
J'ai le même problème !Je passe un jour pour résoudre ce problème, mais ....
les seules choses que j'ai à écrire et à travailler pour moi, c'est ce code j'espère que cela fonctionne pour toi !
et c'est mon modal Code Html
C'est la meilleure solution que j'ai trouver. Vous appelez empêcher de défilement sur la boîte de dialogue ouvrir, puis activer le défilement sur la boîte de dialogue fermer.