DÉSACTIVER le défilement horizontal [fermé]

Ok pour une raison quelconque, ma page Web défile de gauche à droite et montre beaucoup d'espace laid.

J'ai recherché des résultats mais ils ont juste rendu la barre de défilement HIDDEN

C'est maintenant ce que je veux, je veux DÉSACTIVER physiquement la fonction de défilement horizontal. Je ne veux pas que l'utilisateur puisse faire défiler ma page de gauche à droite juste de haut en bas!

J'ai essayé: overflow-x:hiddenen css sur ma htmlbalise mais cela ne faisait que masquer la barre de défilement et ne désactivait pas le défilement.

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 c'est 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 vilain 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 les autres ont fait ici et j'ai utilisé css pour masquer la barre d'outils horizontale:

.name {
  max-width: 100%;
  overflow-x: hidden;
}

Puis dans js, j'ai créé un écouteur d'événement pour rechercher le défilement et contrecarré les tentatives de défilement horizontal des 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.

Je sais qu'il est trop tard , mais il existe une approche en javascript qui peut vous aider à détecter l'élément html de la sorcière qui provoque le débordement horizontal -> la barre de défilement apparaît

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 renvoyer quelque chose comme ceci:

<div class="div-with-extra-width">...</div>

alors vous supprimez simplement la largeur supplémentaire du divou définissez c'estmax-width:100%

J'espère que cela t'aides!

Cela a résolu le problème pour moi:]

Essayez celui-ci pour désactiver le défilement en largeur juste pour le corps, tout le document est juste le corps body{overflow-x: hidden;}

koala_dev a répondu que cela fonctionnera:

html, body {
   max-width: 100%;
   overflow-x: hidden;
}

Et MarkWPiper commente que ": - / Causé le toucher / le défilement de l'élan pour arrêter de travailler sur iPhone"

La solution pour garder le contact / l'élan sur iPhone est d'ajouter cette ligne à l'intérieur du bloc css pour html, body:

    height:auto!important;

La réponse de Koala_dev fonctionnera, mais au cas où vous vous poseriez la question, c'est la raison pour laquelle cela fonctionne:

.
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.     

.

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 à la place la fenêtre.

Vous pouvez essayer toute cette méthode dans notre page html.

1ère voie

body { overflow-x:hidden; }

2ème méthode Vous pouvez utiliser ce qui suit dans votre balise CSS body:

overflow-y: scroll; overflow-x: hidden;

Cela supprimera votre barre de défilement.

3e 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 simple et la plus utile. Il suffit d'ajouter

overflow-x: hidden;

À votre parent extérieur. Dans mon cas, cela ressemble à ceci:

<body style="overflow-x: hidden;">

Vous devez utiliser overflow-xcar si vous utilisez simplement utiliser overflowvous désactivez également le défilement vertical, à savoiroverflow-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 une bonne façon, car si tout était bien configuré, on n'aurait pas à utiliser cette méthode rapide et sale.

.name 
  { 
      max-width: 100%; 
       overflow-x: hidden; 
   }

Vous appliquez le style ci-dessus ou vous pouvez créer une fonction en javaScript pour résoudre ce problème

Vous pouvez remplacer l'événement de défilement du corps 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 de faire cela car cela limite les fonctionnalités pour les utilisateurs avec de petits écrans.