Ok pour une raison quelconque, ma page Web défile de gauche à droite et montre beaucoup d’espace moche.
J'ai cherché des résultats mais ils ont juste fait la barre de défilement HIDDEN
C’est maintenant ce que je veux, je veux physiquement DÉSACTIVER la fonction de défilement horizontal. Je ne veux pas que l'utilisateur puisse faire défiler de haut en bas de gauche à droite sur ma page!
J'ai essayé: overflow-x:hidden
en css sur ma balise html
mais cela n'a fait que masquer la barre de défilement et ne l'a pas désactivé.
Aidez-moi, s'il vous plaît!
Voici un lien vers la page: http://www.green-panda.com/usd309bands/ (Lien brisé)
Cela pourrait vous donner une meilleure idée de ce dont je parle:
C'est à ce moment que les premières pages se chargent:
Et ceci après avoir fait défiler vers la droite:
Essayez d'ajouter ceci à votre CSS
html, body {
max-width: 100%;
overflow-x: hidden;
}
c'est le méchant enfant de votre code :)
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}
le remplacer par
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 100%;
}
Donc, pour résoudre ce problème correctement, j’ai fait ce que d’autres ont fait ici et utilisé css pour cacher la barre d’outils horizontale:
.name {
max-width: 100%;
overflow-x: hidden;
}
Ensuite, dans js, j'ai créé un écouteur d'événement pour rechercher le défilement et contrebalancé la tentative de défilement horizontal effectuée par les utilisateurs.
var scrollEventHandler = function()
{
window.scroll(0, window.pageYOffset)
}
window.addEventListener("scroll", scrollEventHandler, false);
J'ai vu quelqu'un faire quelque chose de similaire, mais apparemment cela n'a pas fonctionné. Cela fonctionne cependant parfaitement bien pour moi.
Essayez celui-ci pour désactiver le défilement en largeur juste pour body Le tout le document est juste body body{overflow-x: hidden;}
Je sais que c'est aussi late, mais il existe une approche en javascript qui peut vous aider à détecter l'élément HTML qui provoque le débordement horizontal -> la barre de défilement
Voici un lien vers l'article sur CSS Tricks
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
il pourrait retourner quelque chose comme ceci:
<div class="div-with-extra-width">...</div>
alors vous supprimez simplement la largeur supplémentaire de la div
ou définissez sa max-width:100%
J'espère que cela t'aides!
Cela a résolu le problème pour moi:]
koala_dev a répondu que cela fonctionnerait:
html, body {
max-width: 100%;
overflow-x: hidden;
}
Et MarkWPiper commente "
La solution pour garder le contact/l'élan sur iPhone consiste à ajouter cette ligne à l'intérieur du bloc CSS pour HTML, corps:
height:auto!important;
Si vous souhaitez désactiver le défilement horizontal sur toute la largeur de l’écran, utilisez ce code.
element {
max-width: 100vw;
overflow-x: hidden;
}
Cela fonctionne mieux que "100%" car il ignore la largeur du parent et utilise plutôt la fenêtre d'affichage.
La réponse de Koala_dev fonctionnera, mais au cas où vous vous demanderiez, voici pourquoi:
.
q.html, body { <--applying this css block to everything in the
html code.
q.max-width: 100%; <--all items created must not exceed 100% of the
users screen size. (no items can be off the page
requiring scroll)
q.overflow-x: hidden; <--anything that occurs off the X axis of the
page is hidden, so that you wont see it going
off the page.
.
Vous pouvez remplacer l’événement body scroll avec JavaScript et réinitialiser le défilement horizontal à 0.
function bindEvent(e, eventName, callback) {
if(e.addEventListener) // new browsers
e.addEventListener(eventName, callback, false);
else if(e.attachEvent) // IE
e.attachEvent('on'+ eventName, callback);
};
bindEvent(document.body, 'scroll', function(e) {
document.body.scrollLeft = 0;
});
Je ne conseille pas cela car cela limite les fonctionnalités pour les utilisateurs avec de petits écrans.
.name
{
max-width: 100%;
overflow-x: hidden;
}
Vous appliquez le style ci-dessus ou vous pouvez créer une fonction dans javaScript pour résoudre ce problème
Vous pouvez essayer toutes ces méthodes dans notre page HTML.
1er chemin
body { overflow-x:hidden; }
2ème manière Vous pouvez utiliser les éléments suivants dans votre balise CSS CSS:
overflow-y: scroll; overflow-x: hidden;
Cela supprimera votre barre de défilement.
3ème voie
body { min-width: 1167px; }
5ème voie
html, body { max-width: 100%; overflow-x: hidden; }
6ème voie
element { max-width: 100vw; overflow-x: hidden; }
4ème voie ..
var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );
Maintenant je cherche plus .. !!!!
Je devais juste m'en occuper moi-même. Après tout, j’ai trouvé cette méthode la plus facile et la plus utile… .. Il suffit d’ajouter
overflow-x: hidden;
À ton parent extérieur. Dans mon cas, cela ressemble à ceci:
<body style="overflow-x: hidden;">
Vous devez utiliser overflow-x
car si vous utilisez simplement overflow
, vous désactivez également le défilement vertical, à savoir overflow-y
.
Si le défilement vertical est toujours désactivé, vous pouvez l'activer explicitement avec:
overflow-y: scroll;
Je sais que ce n'est pas un bon moyen parce que si tout était bien configuré, on n'aurait pas à utiliser cette méthode rapide et sale.