CSS overflow-x: visible; und overflow-y: hidden; verursachen Probleme mit der Bildlaufleiste

Question

Nehmen wir an, Sie haben einen Stil und das Markup:

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>

Wenn Sie dies sehen. Die <ul> hat eine Bildlaufleiste am unteren Rand, obwohl ich sichtbare und verborgene Werte für Überlauf x/y angegeben habe.

(beobachtet auf Chrome 11 und Opera (?))

Ich vermute, dass es eine w3c-Spezifikation oder etwas anderes gibt, das dies vorschreibt, aber ich kann beim besten Willen nicht herausfinden, warum.

JSFiddle

UPDATE:- Ich habe eine Möglichkeit gefunden, dasselbe Ergebnis zu erzielen, indem ich ein weiteres Element um das ul . Sehen Sie sich das an.

Answer 1

Nach einigem Suchen scheint es, dass ich die Antwort auf meine Frage gefunden habe:

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

In Gecko, Safari, Opera, zu 'auto' auch in Kombination mit 'hidden' (mit anderen Worten: 'sichtbar' wird zu 'auto', wenn es kombiniert wird mit etwas anderem als 'sichtbar'). [ ] 9.5 sind da ziemlich konsistent.

auch die W3C-Spezifikation sagt:

Die berechneten Werte und 'overflow-y' sind die gleichen wie ihre angegebenen Werten, außer dass einige Kombinationen mit 'visible' sind nicht nicht möglich sind: wenn einer als 'visible' angegeben ist und das andere 'scroll' oder 'auto' ist, dann wird 'visible' gesetzt auf 'auto' gesetzt. Der berechnete Wert von 'ov Wert von 'overflow-x', wenn 'overflow-y' derselbe ist; andernfalls ist er das Paar der berechneten Werte von 'overflow-x' und Überlauf-y'.

Kurzfassung:

Wenn Sie Folgendes verwenden visible entweder für overflow-x o overflow-y und etwas anderes als visible für die andere, die visible Wert wird interpretiert als auto .

Answer 2

Ein weiterer billiger Hack, der den Zweck zu erfüllen scheint:

style="padding-bottom: 250px; margin-bottom: -250px;" an dem Element, an dem der vertikale Überlauf abgeschnitten wird, mit 250 die so viele Pixel darstellen, wie Sie für Ihr Dropdown usw. benötigen.

Answer 3

Ursprünglich fand ich einen CSS-Weg, um dies zu umgehen, wenn ich das Cycle jQuery Plugin benutze. Cycle verwendet JavaScript, um meine Folie auf overflow: hidden Wenn ich also meine Bilder auf width: 100% die Bilder vertikal geschnitten aussehen würden, und so habe ich sie mit !important und um zu vermeiden, dass die Dia-Animation sofort angezeigt wird, habe ich overflow: hidden in das Container-Div der Folie. Ich hoffe, es funktioniert für Sie.

UPDATE - Neue Lösung:

Ursprüngliches Problem -> http://jsfiddle.net/xMddf/1/ (Auch wenn ich die overflow-y: visible wird es "auto" und tatsächlich "scroll").

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

Die neue Lösung -> http://jsfiddle.net/xMddf/2/ (Ich habe eine Umgehung gefunden, indem ich eine Umschlag div zu beantragen overflow-x y overflow-y zu verschiedenen DOM-Elementen als James Khoury berät über das Problem der Kombination von visible y hidden zu einem einzelnen DOM-Element).

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

Answer 4

Für meinen Anwendungsfall ist das Hinzufügen von overflow-x:visible; overflow-y:clip auf das Div, das den Überlauf hat, scheint mir den gewünschten Effekt des Ausblendens des Überlaufs auf der Y-Achse zu geben, während ich keine Bildlaufleiste auf der X-Achse habe (ich habe einen Karussellschieber, der Bilder in voller Größe lud, bevor er sie wieder nach unten skalierte, und diese Bilder nahmen 75% der Seitenhöhe beim Laden ein, daher wollte ich keine overflow-y ).

Es wurde kein übergeordnetes Wrapper-Div benötigt, sondern nur eine feste height auf das überlaufende Element gesetzt. Mir ist klar, dass diese Lösung vielleicht nicht für jeden funktioniert, aber einigen könnte sie sicherlich helfen.

Answer 5

Ich bin auf dieses Problem gestoßen, als ich versuchte, eine fest positionierte Seitenleiste mit sowohl vertikal blätterbare Inhalte und verschachtelt absolut positionierte Kinder zu sein außerhalb der Seitenleistengrenzen angezeigt .

Mein Ansatz bestand darin, sich separat zu bewerben:

• eine overflow: visible Eigenschaft zum Sidebar-Element
• eine overflow-y: auto Eigenschaft zum inneren Wrapper der Seitenleiste

Bitte sehen Sie sich das nachstehende Beispiel oder eine Online-Codestift .

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>