Wie aktiviere ich Scrollen nur in einer Richtung in CSS?

Question

Ich habe eine Liste mit einigen Größenänderungselementen. Wenn die Größe der Elemente geändert wird, sollten sie den Container in X-Richtung überlaufen. Es sollte niemals in X-Richtung gescrollt werden. Scrollen sollte in y-Richtung aktiviert sein.

Ich habe versucht Einstellung:

overflow-x: visible; 
overflow-y: scroll; 

Dies scheint aber in beiden Richtungen Scrollen zu ermöglichen.

Wie verhindere ich das?

https://jsfiddle.net/64tw8rqe/

---

Die Antworten auf CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue das zugrunde liegende Problem erklären, aber nicht im Fall von scroll eine Behelfslösung.

---

Dieses Verhalten entspricht the spec. Ich suche nach einem Workaround.

Answer 1

Das Problem ist, dass overflow-x: visible; overflow-y: scroll eine unmögliche Kombination in CSS ist. Immer wenn visible mit scroll gepaart wird, wird es in konvertiert. Mit anderen Worten, diese sind äquivalent:

overflow-x: visible; 
overflow-y: scroll; 

overflow-x: auto; 
overflow-y: scroll; 

Es war ein schlechtes Urteil entschiedene für die Spezifikation, aber es gibt Workarounds.

Durch die Erweiterung der Elemente position: absolute ändert ihre Größe den Container nicht, und sie werden nicht von overflow: hidden abgeschnitten. Um sie richtig positioniert zu bekommen, wird ein extra div mit position: relative um den ganzen Behälter gewickelt.

HTML:

<div class='container1'> 
    <div class='container2'> 
    <ul class='messages'> 
     <li><pre>Hello</pre></li> 
     <li> 
     <pre>This is a 
     really really really 
     really really long message.</pre> 
     </li> 
     <li><pre>World</pre></li> 
    </ul> 
    </div> 
</div> 

CSS:

* { 
    margin: 0; 
    padding: 0; 
} 

.container1 { 
    position: relative; 
    width: 200px; 
} 

.container2 { 
    background: #f0f; 
    width: 100%; 
    height: 100%; 
    overflow: scroll; 
} 

.messages { 
    overflow: visible; 
    list-style: none; 
} 

.messages li { 
    background: #ff0; 
    width: 100%; 
    height: 24px; 
    margin-top: 12px; 
} 

.messages li pre { 
    position: absolute; 
    display: inline-block; 
    box-sizing: border-box; 
    width: 100%; 
    max-height: 24px; 
    padding: 4px; 
    background: #0ff; 
    border-radius: 4px; 
    line-height: 16px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: auto; 
    min-width: 100%; 
    max-width: 100%; 
    transition: max-width 200ms ease-out, height 200ms ease-out; 
} 

.messages li pre:hover { 
    z-index: 1; 
    background: #00f; 
    max-width: 80vw; 
    max-height: 80vh; 
    transition: max-width 200ms ease-in, max-height 200ms ease-in; 
} 

Fiddle:

https://jsfiddle.net/cyL6tc2k/2/

Kredite an den Trick gefunden: http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent

Answer 2

Versuchen Überlauf-y Wechsel: hidden

Answer 3

Dies ist aufgrund Ihrer Nutzung von „pre“, die einige Standardwerte bei einigen Browsern hat:

pre { 
     display: block; 
     font-family: monospace; 
     white-space: pre; 
     margin: 1em 0; 
    } 

Sie haben zwei Möglichkeiten: Ändern Sie alle „pre“ durch „p“ (Absatz) oder schreiben Sie die white-space-Eigenschaft vor, durch das Hinzufügen von:

pre { white-space: normal; } 

Answer 4

Wenn Sie vertikalen Überlauf haben, wird eine Bildlaufleiste auf die horizontale Strömung hinzugefügt (nach rechts) . Elemente werden diese Bildlaufleiste nicht überlagern, sodass Browser Ihre Überlaufeinstellungen so ändern, dass sie stattdessen horizontal blättern.

Was Sie tun müssen, um einen anderen Behälter um den gesamten Inhalt hinzufügen und setzen eine größere Breite zu haben, die alle von der übergelaufenen Inhalt innen, aber eine Höhe des inneren Elements und vertikale Scroll:

HTML

<div class='container3'><!-- Add a parent container --> 
    <div class='container'> 
    ... 
    </div> 
</div> 

CSS

/* A parent container */ 
.container3 { 
    /* The maximum height of your inner content before scrolling is enabled */ 
    height: 200px; 

    /* Enable the vertical scroll if we have enough content */ 
    overflow-y: auto; 
} 

FIDDLE

https://jsfiddle.net/cL8hr7ot/