Überlauf-y: blättern mit Überlauf-x: sichtbar

Ist es möglich, einen Artikelüberlauf horizontal aus einer vertikal scrollbaren Liste zu haben?Überlauf-y: blättern mit Überlauf-x: sichtbar

Ich habe ein codepen Beispiel hier:

http://codepen.io/baskuipers/pen/GqQYRJ

var $item = $('#1'), 
 
    $button = $('.button'); 
 

 
$button.on("click", function() { 
 
    $item.toggleClass('addMargin'); 
 
});

.sidenav { 
 
    width: 300px; 
 
    background-color: grey; 
 
    position: fixed; 
 
    padding: 20px; 
 
} 
 
.addMargin { 
 
    margin-left: 60px; 
 
} 
 
.item { 
 
    width: 100%; 
 
    overflow-y: auto; 
 
    height: 100vh; 
 
    z-index: 5; 
 
    position: relative; 
 
} 
 
.sub-item { 
 
    transition: margin-left 1s cubic-bezier(0.36, -0.48, 0, 2.22); 
 
    background-color: orange; 
 
    height: 100px; 
 
    width: 100%; 
 
    margin-bottom: 10px; 
 
    z-index: 10; 
 
    position: relative; 
 
} 
 
body { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sidenav"> 
 
    <button class="button">test</button> 
 
    <div class="item"> 
 
    <div id="1" class="sub-item"></div> 
 
    <div class="sub-item"></div> 
 
    <div class="sub-item"></div> 
 
    <div class="sub-item"></div> 
 
    <div class="sub-item"></div> 
 
    </div> 
 
</div>

Im Beispiel ich das gelbe Element aus der Liste steht haben möchte. Es ist kein Problem für die Sichtbarkeit der Bildlaufleisten.

Irgendwelche Vorschläge? CSS/JavaScript?

Danke!

Quelle

2016-07-19 Bas Kuipers

@SeanLeBlanc, die Frage des OP fragt, ob ein Element entlang der X-Achse überlaufen kann, während die Y-Achse auf Überlauf eingestellt ist. Das Duplikat, das du gepostet hast, ist ein ganz anderes Problem ... –

@HunterTurner Antworten auf die Frage, auf die ich Bezug genommen habe, erklären, warum die offensichtliche Lösung der Frage des OP (dh 'overflow-x: visible; overflow-y: auto;') nicht geht arbeiten und bieten einige Workarounds. Wäre es besser, in einem Fall wie diesem nur einen Link zu der Frage zu kommentieren? –

Nach dem Lesen https://stackoverflow.com/a/6433475/4386196 scheint es wie die Antwort ist nein, es ist nicht möglich. Sie müssten overflow-x: visible einstellen, aber da Sie overflow-y gesetzt haben, wird es als auto behandelt, was den Inhalt verbirgt.

Dies ist wahrscheinlich nicht lösen Ihr Problem genau, aber wenn man hinzufügen:

margin-right: -100px; padding-right: 100px;

zu .item Sie können die Bildlaufleiste bewegen und mehr Raum für Überlauf geben in der Box. Am nächsten könnte ich zu einer Lösung kommen.

Quelle

2016-07-19 20:32:18

Überlauf-y: blättern mit Überlauf-x: sichtbar

Antwort

Verwandte Themen