CSS-Überlauf-x: sichtbar; und Überlauf-y: versteckt; Problem mit der Bildlaufleiste

Angenommen, 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 anzeigen. Das <ul>hat eine Bildlaufleiste am unteren Rand, obwohl ich sichtbare und versteckte Werte für Überlauf x / y angegeben habe.

(beobachtet auf Chrome 11 und Oper (?))

Ich vermute, es muss eine w3c-Spezifikation geben oder etwas, das dies sagt, aber für mein Leben kann ich nicht herausfinden, warum.

JSFiddle

UPDATE: - Ich habe einen Weg gefunden, das gleiche Ergebnis zu erzielen, indem ich ein weiteres Element hinzugefügt habe, das um das Feld gewickelt ist ul. Hör zu.

Nach einigen ernsthaften Suchen scheint ich die Antwort auf meine Frage gefunden zu haben:

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

In Gecko, Safari, Opera wird "sichtbar" auch in Kombination mit "versteckt" zu "automatisch" (mit anderen Worten: "sichtbar" wird zu "automatisch", wenn es mit etwas anderem als "sichtbar" kombiniert wird). Gecko 1.8, Safari 3, Opera 9.5 sind unter ihnen ziemlich konsistent.

auch die W3C-Spezifikation sagt:

Die berechneten Werte von 'overflow-x' und 'overflow-y' stimmen mit den angegebenen Werten überein, außer dass einige Kombinationen mit 'sichtbar' nicht möglich sind: Wenn eine als 'sichtbar' angegeben ist und die andere 'scrollen' ist. oder 'auto', dann wird 'sichtbar' auf 'auto' gesetzt. Der berechnete Wert von 'Überlauf' ist gleich dem berechneten Wert von 'Überlauf-x', wenn 'Überlauf-y' gleich ist; Andernfalls handelt es sich um das Paar berechneter Werte von 'Überlauf-x' und 'Überlauf-y'.

Kurzfassung:

Wenn Sie visiblefür entweder overflow-xoder overflow-yund etwas anderes als visiblefür das andere verwenden, wird der visibleWert als interpretiert auto.

ein weiterer billiger Hack, der den Trick zu tun scheint:

style="padding-bottom: 250px; margin-bottom: -250px;"auf dem Element, bei dem der vertikale Überlauf 250abgeschnitten wird , wobei so viele Pixel dargestellt werden, wie Sie für Ihr Dropdown usw. benötigen.

Ich habe ursprünglich eine CSS-Methode gefunden, um dies zu umgehen, wenn ich das Cycle jQuery-Plugin verwende. Cycle verwendet JavaScript, um meine Folie overflow: hiddenso einzustellen , dass beim Festlegen meiner Bilder auf width: 100%die Bilder vertikal geschnitten aussehen würde. Daher habe ich sie gezwungen, sichtbar zu sein !importantund zu vermeiden, dass die Folienanimation aus dem Feld angezeigt wird, das ich overflow: hiddenauf den Container div des eingestellt habe rutschen. Hoffe es funktioniert für dich.

UPDATE - Neue Lösung:

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

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

Die neue Lösung -> http://jsfiddle.net/xMddf/2/ (Ich habe eine Problemumgehung gefunden, bei der ein Wrapper- Div zum Anwenden overflow-xund overflow-yauf verschiedene DOM-Elemente verwendet wurde, wie James Khoury zum Problem der Kombination visibleund hiddeneines einzelnen DOM-Elements empfohlen hat .)

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

Ich bin auf dieses Problem gestoßen, als ich versucht habe, eine fest positionierte Seitenleiste mit vertikal scrollbarem Inhalt und verschachtelten absolut positionierten untergeordneten Elementen zu erstellen, die außerhalb der Seitenleistengrenzen angezeigt werden sollen .

Mein Ansatz bestand darin, separat anzuwenden:

• eine overflow: visibleEigenschaft für das Seitenleistenelement
• Eine overflow-y: autoEigenschaft für den inneren Wrapper der Seitenleiste

Bitte überprüfen Sie das folgende Beispiel oder einen Online-Codepen .

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>

Ich habe den content+wrapperAnsatz verwendet ... aber ich habe etwas anderes getan als bisher erwähnt: Ich habe sichergestellt, dass die Grenzen meines Wrappers NICHT mit den Grenzen des Inhalts in der Richtung übereinstimmen, in der ich sichtbar sein wollte .

Wichtiger Hinweis: Es war leicht genug , um das zu bekommen content+wrapper, same-boundsAnsatz zur Arbeit auf der einen Browser oder eine andere in Abhängigkeit von verschiedenen CSS - Kombinationen position, overflow-*usw ... aber ich konnte nie diesen Ansatz verwenden , um sie zu erhalten alle korrekt (Edge, Chrome, Safari,. ..).

Aber als ich so etwas hatte wie:

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

... alle Browser waren glücklich.

Es gibt jetzt eine neue Möglichkeit, dieses Problem zu beheben: Wenn Sie die Position entfernen: Relativ aus dem Container, bei dem der Überlauf y sichtbar sein muss, können Sie den Überlauf y sichtbar und den Überlauf x ausgeblendet haben und umgekehrt (Überlauf haben). x sichtbar und Überlauf-y ausgeblendet, stellen Sie einfach sicher, dass der Container mit der sichtbaren Eigenschaft nicht relativ positioniert ist.

Weitere Informationen finden Sie in diesem Beitrag von CSS Tricks - es hat bei mir funktioniert: https://css-tricks.com/popping-hidden-overflow/