web-dev-qa-db-fra.com

DÉSACTIVER le défilement horizontal

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: 

enter image description here

Et ceci après avoir fait défiler vers la droite: 

enter image description here

htmlcss
137
user2371301

Essayez d'ajouter ceci à votre CSS

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

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%;
}
11
Abdul Malik

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.

10
Dylan Cope

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;}

4
easa

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:]

4
MoolsBytheway

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;
3
ffffff

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.

1
Fabian von Ellerts

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.

.

0
SchadeM

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.

0
Austin Brunkhorst
.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 

0
user8491101

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

0
Princeferozepuria

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. 

0
The Fool