it-swarm.com.de

CSS-Überlauf-x: sichtbar; und Überlauf-y: versteckt; was zu Problemen mit der Bildlaufleiste führt

Angenommen, Sie haben Stil und 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 das sehen. Der <ul> hat am unteren Rand eine Bildlaufleiste, obwohl für sichtbare und ausgeblendete Werte für Überlauf x/y angegeben wurde.

(beobachtet bei Chrome 11 und Opera (?))

Ich vermute, es muss ein paar W3C-Spezifikationen geben oder etwas, das dies sagt, aber für mein Leben kann ich nicht herausfinden, warum. 

JSFiddle

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

363
James Khoury

Nach einer gründlichen Suche scheint es, als habe ich die Antwort auf meine Frage gefunden:

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

In Gecko, Safari, Opera, "sichtbar" wird auch in Verbindung mit "Ausgeblendet" (mit anderen Worten: "sichtbar" Wird zu "auto", wenn mit Etwas anderes als "Sichtbar") kombiniert wird. Gecko 1.8, Safari 3, Opera 9,5 sind ziemlich konstant zwischen ihnen.

auch die W3C-Spezifikation sagt:

Die berechneten Werte von 'overflow-x' und "overflow-y" sind die gleichen wie ihre angegebene Werte, außer dass einige Kombinationen mit "sichtbar" sind nicht möglich: wenn einer als .__ angegeben ist. "Sichtbar" und der andere ist "Blättern" oder "Auto", dann ist "visible" auf .__ gesetzt. 'Auto'. Der berechnete Wert von "Überlauf" ist gleich dem berechneten Wert von "overflow-x", wenn "overflow-y" ist dasselbe; Ansonsten ist es das Paar der berechneten Werte von 'overflow-x' und "Überlauf-y".

Kurzfassung:

Wenn Sie visible für overflow-x oder overflow-y und etwas anderes als visible für das andere verwenden, wird der visible-Wert als auto interpretiert.

567
James Khoury

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

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

83
Justin Krause

Ich habe ursprünglich einen CSS-Weg gefunden, um dies zu umgehen, wenn Sie das Cycle jQuery-Plugin verwenden. Cycle verwendet JavaScript, um meine Folie auf overflow: hidden zu setzen. Wenn Sie also meine Bilder auf width: 100% setzen, sehen die Bilder vertikal geschnitten aus. Daher zwang ich sie, mit !important sichtbar zu sein, und um zu vermeiden, dass die Folienanimation aus der Box angezeigt wird, in die ich overflow: hidden gesetzt habe 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 overflow-y: visible verwende, wird es "auto" und eigentlich "scroll".)

#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, in der ein Wrapper div verwendet wurde, um overflow-x und overflow-y auf unterschiedliche Werte anzuwenden DOM-Elemente als James Khoury hat über das Problem der Kombination von visible und hidden zu einem einzelnen DOM-Element beraten.)

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

Ich bin auf dieses Problem gestoßen, als ich versuche, ein fest positionierte Seitenleiste mit sowohl vertikal scrollbaren Inhalten als auch verschachtelten absolut positionierten Kindern zu erstellen, um außerhalb angezeigt) zu sein Seitenleistengrenzen.

Mein Ansatz bestand aus getrennt anzuwenden:

  • eine overflow: visible-Eigenschaft für das Seitenleistenelement
  • eine overflow-y: auto-Eigenschaft für den inneren Wrapper der Seitenleiste

Bitte überprüfen Sie das Beispiel unten oder ein 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>

6
Andrea Carraro

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

Wichtiger Hinweis: Es war leicht genug, den content+wrapper, same-bounds-Ansatz in einem oder dem anderen Browser zu aktivieren, abhängig von den verschiedenen CSS-Kombinationen von position, overflow-* usw., aber ich könnte diesen Ansatz niemals verwenden, um sie mit all richtig zu machen ( Edge, Chrome, Safari, ...).

Aber als ich so etwas hatte:

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

3
dsdsdsdsd

Es gibt jetzt eine neue Möglichkeit, dieses Problem anzugehen - wenn Sie position: relative aus dem Container entfernen, der den Überlauf sichtbar machen muss, können Sie den sichtbaren Überlauf und den ausgeblendeten Überlauf-x ausblenden und umgekehrt (Überlauf-x sichtbar und Überlauf-y ausgeblendet, stellen Sie nur sicher, dass der Container mit der visible-Eigenschaft nicht relativ positioniert ist).

In diesem Beitrag von CSS-Tricks finden Sie weitere Informationen - es hat für mich funktioniert: https://css-tricks.com/popping-hidden-overflow/

0
Alexandra