web-dev-qa-db-fra.com

CSS overflow-x: visible; et débordement-y: caché; provoquant problème de barre de défilement

Supposons que vous ayez du style et le balisage:

ul
{
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
/* added width so it would work in the snippet */
  width: 100px; 
}
li
{
  display: inline-block;
}
<div>
  <ul>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>

Quand vous voyez ceci. Le <ul> a une barre de défilement en bas, même si j'ai spécifié des valeurs visibles et masquées pour le dépassement de capacité x/y.

(observé sur Chrome 11 et l'opéra (?))

Je suppose qu'il doit y avoir une spécification W3c ou quelque chose qui dit que cela se produise, mais pour la vie de moi, je ne peux pas comprendre pourquoi. 

JSFiddle

UPDATE: - J'ai trouvé un moyen d'obtenir le même résultat en ajoutant un autre élément encapsulé autour de ul. Vérifiez-le.

htmlcss
363
James Khoury

Après quelques recherches sérieuses, il semble que j'ai trouvé la réponse à ma question:

de: http://www.brunildo.org/test/Overflowxy2.html

Dans Gecko, Safari, Opera, ‘visible’ devient «auto» également lorsqu'il est combiné avec «Caché» (autrement dit: «visible» Devient «auto» lorsqu'il est combiné avec Avec tout autre chose que «Visible»). Gecko 1.8, Safari 3, Opera 9,5 sont assez cohérents parmi eux.

également le spec W3C dit:

Les valeurs calculées de ‘overflow-x’ et ‘overflow-y’ sont identiques à leur valeurs spécifiées, sauf que certaines les combinaisons avec «visible» ne sont pas possible: si on en spécifie "Visible" et l’autre est "scroll" ou «Auto», alors «visible» est réglé sur 'auto'. La valeur calculée de Le «débordement» est égal à la valeur calculée valeur de ‘overflow-x’ si ‘overflow-y’ est le même; sinon c'est la paire des valeurs calculées de ‘overflow-x’ et «Débordement-y».

Version courte:

Si vous utilisez visible pour overflow-x ou overflow-y et quelque chose d'autre que visible pour l'autre, la valeur visible est interprétée comme auto.

567
James Khoury

un autre hack pas cher, qui semble faire l'affaire:

style="padding-bottom: 250px; margin-bottom: -250px;" sur l'élément où le débordement vertical est en train d'être coupé, avec 250 représentant autant de pixels que nécessaire pour votre liste déroulante, etc.

83
Justin Krause

À l'origine, j'avais trouvé un moyen de contourner ce problème lors de l'utilisation du plug-in Cycle jQuery. Cycle utilise JavaScript pour définir ma diapositive sur overflow: hidden. Ainsi, lorsque je définissais mes images sur width: 100%, les images avaient l'air coupées verticalement. Je les ai donc forcées à être visibles avec !important et pour éviter d'afficher l'animation de la diapositive dans la boîte, je règle overflow: hidden sur conteneur div de la diapositive. J'espère que ça marche pour toi.

UPDATE - Nouvelle solution:

Problème d'origine -> http://jsfiddle.net/xMddf/1/ (Même si j'utilise overflow-y: visible, il devient "auto" et en réalité "scroll".)

#content {
    height: 100px;
    width: 200px;
    overflow-x: hidden;
    overflow-y: visible;
}

La nouvelle solution -> http://jsfiddle.net/xMddf/2/ (J'ai trouvé une solution de contournement en utilisant un wrapper div pour appliquer overflow-x et overflow-y à différents Eléments DOM en tant que James Khoury conseillé sur le problème de la combinaison de visible et hidden à un seul élément DOM.)

#wrapper {
    height: 100px;
    overflow-y: visible;
}
#content {
    width: 200px;
    overflow-x: hidden;
}
72
Macumbaomuerte

J'ai rencontré ce problème en essayant de créer une barre latérale positionnée fixed avec à la fois un contenu défilable verticalement et des enfants absolus positionnés à afficher affichés en dehors des limites de la barre latérale.

Mon approche consistait à appliquer séparément:

  • une propriété overflow: visible à l'élément sidebar
  • une propriété overflow-y: auto dans l'emballage interne de la barre latérale

S'il vous plaît vérifier l'exemple ci-dessous ou un codepen en ligne .

html {
  min-height: 100%;
}
body {
  min-height: 100%;
  background: linear-gradient(to bottom, white, DarkGray 80%);
  margin: 0;
  padding: 0;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 200px;
  overflow: visible;  /* Just apply overflow-x */
  background-color: DarkOrange;
}

.sidebarWrapper {
  padding: 10px;
  overflow-y: auto;   /* Just apply overflow-y */
  height: 100%;
  width: 100%;
}

.element {
  position: absolute;
  top: 0;
  right: 100%;
  background-color: CornflowerBlue;
  padding: 10px;
  width: 200px;
}
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<div class="sidebar">
  <div class="sidebarWrapper">
    <div class="element">
      I'm a sidebar child element but I'm able to horizontally overflow its boundaries.
    </div>
    <p>This is a 200px width container with optional vertical scroll.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </div>
</div>

6
Andrea Carraro

J'ai utilisé l'approche content+wrapper ... mais j'ai fait quelque chose de différent de ce qui a été mentionné jusqu'à présent: je me suis assuré que les limites de mon emballage étaient _ et non pas [ alignées avec les limites du contenu dans la direction que je voulait être visible.

NOTE IMPORTANTE: Il était assez facile de faire fonctionner l’approche content+wrapper, same-bounds sur un navigateur ou un autre en fonction de diverses combinaisons CSS de position, overflow-*, etc ... mais je n’ai jamais pu utiliser cette approche pour les corriger tout Edge, Chrome, Safari, ...).

Mais quand j'ai eu quelque chose comme:

  <div id="hack_wrapper" // created solely for this purpose
       style="position:absolute; width:100%; height:100%; overflow-x:hidden;">
      <div id="content_wrapper"
           style="position:absolute; width:100%; height:15%; overflow:visible;">         
          ... content with too-much horizontal content ... 
      </div>
  </div>

... tous les navigateurs étaient heureux.

3
dsdsdsdsd

Il existe maintenant une nouvelle façon de résoudre ce problème - si vous supprimez position: relative du conteneur dans lequel le débordement doit être visible, vous pouvez avoir overflow-y visible et overflow-x masqué, et inversement (ayez overflow-x visible et overflow-y masqué, assurez-vous simplement que le conteneur avec la propriété visible n'est pas relativement positionné).

Voir ce message de CSS Astuces pour plus de détails - cela a fonctionné pour moi: https://css-tricks.com/popping-hidden-overflow/

0
Alexandra