J'ai une page Web qui contient du contenu qui s'étend au-delà du bord droit de la fenêtre du navigateur. J'ai défini Y a-t-il un moyen d'empêcher le navigateur de faire défiler horizontalement?
Note latérale: Safari 4.0.4 Seuls uniquement horizontalement, et le défilement se sent "collant" et "nerveux", tandis que Firefox fait toujours défiler sans heurts horizontalement. Overflow-x: caché sur
6 Réponses :
Vous pouvez essayer de définir CSS: au lieu d'utiliser corps sélecteur.
J'ai essayé ça et travaille dans Firefox.
J'ai également essayé cela dans FF et il semble avoir exactement le même problème. La meilleure solution serait, comme @chaulky noté, de définir simplement l'affichage sur "None". Si vous voulez que cela apparaisse, faites-le de JS / JQuery pour le déplacer à nouveau.
Si tout le reste échoue, vous pouvez utiliser JavaScript pour forcer constamment le navigateur à faire défiler vers la fenêtre gauche avec fenêtre.scrollto (XPOS, YPOS). Pour XPOS, vous voudrez utiliser 0 et YPOS, vous souhaiterez obtenir la position de défilement actuelle de l'utilisateur en supposant que vous souhaitiez permettre le défilement vertical.
Vous pouvez mettre votre fonction de fonction soit dans la fenêtre.Essroll du gestionnaire d'événements decroll, soit dans un intervalle JavaScript qui fonctionne tous les 100 ms environ. À toi de voir. Si vous avez besoin d'exemples de code, demandez simplement.
Pour éviter tout défilement, on pourrait utiliser une combinaison de Overflow: caché , window.onscroll et fenêtre.scrollto afin de masquer les barres de défilement, et diriger l'utilisateur à 0,0 (le haut à gauche de l'écran) sur le rouleau, en conservant efficacement la page Web dans sa position actuelle (ou YPOS comme position de défilement actuelle de l'utilisateur pour conserver le défilement vertical comme @invisiblebacon suggéré)
Ce serait préférable de comprendre si vous aviez un exemple.
Est-ce une URL longue ou quelque chose sans espaces blouses? Avez-vous Si vous avez un conteneur avec une taille définie (une qui convient à la fenêtre), le texte doit adhérer correctement (sauf s'il s'agit d'une longue ligne sans espaces) blanc-espace: Nowrap; défini sur l'élément?
Je pense que la vraie question est, pourquoi avez-vous votre contenu débordant de la taille souhaitée de la page? Ce contenu est-il que vous ne voulez pas que les utilisateurs voient réellement? Dans ce cas, mettez-le dans un div un endroit où il est affiché. Cela éviterait entièrement le problème de trop-plein.
S'il y a une raison légitime, vous voulez que cela déborde du conteneur, puis définissez la taille du conteneur explicitement, puis le débordement-x sur caché. Je ne l'ai pas testé, mais cela devrait empêcher le comportement actuel. Sinon, essayez d'utiliser un div, plutôt que l'étiquette du corps. Les navigateurs peuvent agir étrangement parce que cela fonctionne sur la balise du corps lui-même.
J'irais en chrome et ouvrez les outils de développement sur un bureau. Supprimer la propriété Overflow-x. Ensuite, procédez pour supprimer chaque élément parent de votre page. Lorsque vous voyez que la barre de défilement horizontale disparaît, vous savez que vous avez trouvé votre problème. Puis plongez dans cet élément. Mon pari est que vous avez une largeur de 100% et qu'une marge mise sur elle. Retirez la marge si c'est le cas.
Une vieille discussion, mais cela pourrait être utile aux personnes à la recherche de la bonne réponse!
SET "Overflow: caché" sur le parent DIV de l'élément plus large que la fenêtre du navigateur (non html ou corps comme vous le feriez normalement), cela arrêtera le défilement avec de la coussinette ou du tampon de flèche ...