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

454

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.

James Khoury
quelle
Was ist Ihr gewünschtes Ergebnis? jsfiddle.net/Kyle_Sevenoaks/3xv6A/2
Kyle
@kyle es sollte ein bisschen mehr aussehen wie: jsfiddle.net/3xv6A/5 Wenn ich overflow-x hidden;es setze, wird leider die Schriftrolle entfernt, aber da ich die li-Elemente brauche, um den Rand unten auszublenden, ergibt sich der gewünschte gestrichelte Effekt. Ich verstehe nicht, warum overflow-x: visibleeine Bildlaufleiste erstellt wird. Es sollte nicht afaik.
James Khoury
@JamesKhoury Kannst du etwas näher auf deine Lösung eingehen? Ich kann es nicht wirklich zum
Laufen bringen
1
@GeorgeKatsanos Die Problemumgehung: jsfiddle.net/3xv6A/9 basiert auf dem Elternwesenoverflow: hidden; und einem Kind, das um das <ul>Wesen herum eingefügt wird overflow: visible.
James Khoury
@ JamesKhoury Glaubst du, es kann für embedded.plnkr.co/2rbaISwvzuKhyPEFpBKD funktionieren
George Katsanos

Antworten:

680

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.

James Khoury
quelle
263
Ich verstehe, dass das W3C es so spezifiziert, aber was ist die Motivation dahinter? Ich finde es ziemlich seltsam und inkonsistent, was zu chaotischen Umgehungen führt, die das Hinzufügen trivialer HTML-Elemente erfordern.
Erwin
21
@Erwin Ich stimme zu, hoffentlich beschließt jemand, die Spezifikation zu aktualisieren.
James Khoury
124
Du hast recht, aber es macht keinen Sinn. Der häufigste Grund, warum Sie x und y möchten, ist, dass Sie das eine versteckt und das andere sichtbar machen können.
Rettungskreativ
91
Das ist lähmend. Warum können wir nicht zulassen overflow-x:visiblewährend overflow-y:hiddenohne Eltern / Kind - Hack? Hübsche Koje, IMO.
Slink
34
Das ist total lähmend. Ich habe versucht, eine Reihe von Dropdown-Links in einer Bootstrap-Navigationsleiste horizontal zu scrollen, aber das bricht die Dropdowns, auf die man sich verlässt overflow-y: visible. Boo CSS!
Andy
131

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.

Justin Krause
quelle
6
Vielen Dank, obwohl sich das hackig anfühlt, scheint es aber der beste Weg zu sein, das Problem zu lösen. Überläufe sind schrecklich in CSS :(
Serge Eremeev
11
Dies lässt die horizontale Bildlaufleiste so weit unten erscheinen
nafg
2
Dies blockiert auch Zeigerereignisse für 250px unterhalb des Elements. Aber ich habe einen Weg gefunden, und diese Lösung verwende ich.
Chris Chudzicki
2
2 Jahre später und dies scheint immer noch die beste Antwort auf dieses Problem zu sein ... Hoffentlich werden wir mit einem weiteren Browser (Microsoft Edge), der auf das Chromium Open Source-Projekt springt, eine schnellere Entwicklung wichtiger Browserfunktionen sowie einen besseren Browser sehen Kompatibilität.
Spencer O'Reilly
In meinem speziellen Szenario, in dem das Entfernen position: relativeoder Verwenden von Wrappern nicht möglich war, war dies die einzige Lösung, die funktionierte, obwohl es auch erforderlich war, overflow-x: hiddenuntergeordneten Elementen innerhalb des Elements, auf die ich setzen wollte, um den Hacky zu kompensieren, viele hässliche Ränder hinzuzufügen Polsterung. Das hat mich aber gerettet, also danke!
Philip Stratford
81

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;
}
Macumbaomuerte
quelle
12
Wie trifft das zu? Es scheint nicht mit Überlauf-x oder Überlauf-y zu funktionieren.
James Khoury
1
@ Macumbaomuetre Das ist klarer, danke +1. Es ähnelt dem "Update", das ich hinzugefügt habe. Ursprünglich war ich nicht in der Lage, das Wrapping-Div zu ändern, und meine Lösung endete ähnlich wie: jsfiddle.net/3xv6A/338
James Khoury
9
Diese Lösung gilt nicht. Die Frage ist overflow-x:visible;und overflow-y:hidden. Nicht umgekehrt.
Jakobovski
1
@TomasJansson @Edward Es funktioniert , Sie müssen nur tauschen, wo Sie die overflow-xund -y: aktualisierte Geige anwenden .
Nur ein Student
1
Dies schlägt fehl, sobald der Wrapper aus irgendeinem Grund eine Breite gewinnt - jsfiddle.net/ad1941k9/16
David Meister
10

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>

Andrea Carraro
quelle
2
Ich bin mir ziemlich sicher, dass dies die gleiche Lösung ist, die andere vorgestellt haben, außer mit autostatt hidden.
James Khoury
@ JamesKhoury Aber dies ist das einzige, das ich verstehen kann, weil es auf die Verwendung vonposition
Guichi
7

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.

dsdsdsdsd
quelle
5

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/

Alexandra
quelle
2
Aber das würde etwas Javascript erfordern, um das Element richtig zu positionieren, wenn es absolut ist
gaurav5430