web-dev-qa-db-fra.com

overflow-x: caché peut toujours défiler

Le problème est:

J'ai un menu de barre pleine largeur, qui est créé en créant une grande marge à droite et à gauche. Cette marge doit être rognée par overflow-x: hidden, et c'est ... pas de barres de défilement, tout (visuellement) est ok ...

Mais, si vous faites glisser la page (à l'aide de Mac Lion) ou faites défiler vers la droite, la page affiche une énorme barre, qui aurait dû être rognée par le overflow-x:hidden.

CSS

html {
  margin:0;
  padding:0;
  overflow-x:hidden;
}
body {
  margin: 0 auto;
  width: 950px;
}

.full, .f_right {
  margin-right: -3000px !important;
  padding-right: 3000px !important;
}

.full, .f_left {
  margin-left: -3000px !important;
  padding-left: 3000px !important;
}

Voici un lien: http://jsfiddle.net/NicosKaralis/PcLed/1/

Vous devez ouvrir en brouillon pour voir ... le jsfiddle css le fait fonctionner en quelque sorte.

@Krazer

j'ai et structure comme ceci:

body
  div#container
    div#menu_bar
      div#links
      div#full_bar
    div#content_body
    ...

le #container est un div centré et a une largeur fixe de 950px, le #full_bar est une barre qui s'étend sur toute la fenêtre, d'un côté à l'autre

si je mets la largeur à 100% dans #full_bar, il n'obtiendra que la largeur intérieure et non la largeur de la fenêtre

htmlcssoverflow
43
Nicos Karalis

Je ne pense pas qu'il existe un moyen d'empêcher le défilement d'un élément sans utiliser JavaScript. Avec JS, cependant, il est assez facile de définir scrollLeft sur 0 onscroll.

6
powerbuoy

J'ai eu exactement le même problème. Je l'ai résolu en mettant overflow-x: hidden; le les deux les body et html.

html {
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
}
body {
  margin: 0 auto;
  overflow-x: hidden;
  width: 950px;
}
.full {
  background: red;
  color: white;
}
.full,
.f_right {
  margin-right: -3000px !important;
  padding-right: 3000px !important;
}
.full,
.f_left {
  margin-left: -3000px !important;
  padding-left: 3000px !important;
}
<div>
  <div class="full">
    abc
  </div>
</div>
100
igneosaur

Il existe une autre façon de résoudre ce problème avec une seule ligne de code:

body {
    /* All your regular code including overflow-x: hidden; */
    position:relative;
}

Cela a résolu mes problèmes sur le webkit (Mac)

Référence: http://www.tonylea.com/2010/safari-overflow-hidden-problem/

32
DD.

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

Résolu le problème pour moi, sauf pour IE - vous pouvez toujours faire glisser le site vers la droite si vous faites un effort pour le faire.

En utilisant overflow: hidden; supprime la barre de défilement verticale, ce n'est donc pas une solution.

Je n'ai pas réussi à trouver une meilleure solution en utilisant JavaScript.

8
Daniel Antunes Pinto

J'ai trouvé la solution ici https://stackoverflow.com/a/9399429/622041

Vous aurez pour mettre un #wrapper autour de votre contenu. overflow:hidden sur le body ne fonctionnera pas.

#wrapper {position: absolute; width: 100%; overflow-x: hidden}

Et voici le HTML:

<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="wrapper">
      <div class="yourContent"> ... </div>
    </div>
  </body>
</html>
7
kernel

De la démo Offcanvas de Weaver http://jasonweaver.name/lab/offcanvas/

Enveloppez le contenu avec:

width: 100%; 
overflow: hidden;

Cela limite uniquement la largeur et a fonctionné dans des occasions similaires et a également empêché le défilement pendant le déplacement.

3
MTJ

Essayez l'élément html à position fixe, mais cela désactive le défilement dans les deux sens.

html {
    position: fixed;
}
2
user2656130

Débordement sur le <body> et le <html> les balises ont également fonctionné pour moi.

0
D3XT3R

Que diriez-vous de définir la largeur sur le corps du contenu et de déformer le #container autour du #menu_bar et #content_body?

body
    div#container 
       div#menu_bar (absolute positioned)
          div#links
          div#full_bar
       div#content_body (relative positioned + padding [#menu_bar height])
          ...

exemple CSS .

0
Krazer