2016-06-06 10 views
0

Ich habe ähnliche Fragen gesehen, habe versucht, aber das ist nicht für meinen Fall funktioniert.Verwendung von versteckten Überlauf-x und sichtbaren Überlauf-y Breite absolute Position ohne Bildlauf

Hier ist was ich will: Weiß und Rot ist die absolute Position. Weiß ausgelöst durch Schweben auf Rot. Auf diesem Bild ist overflow-x deaktiviert.

What I want

Weil ich rote Rechtecke außerhalb der blauen Box verstecken müssen, fügte ich overflow-x: hidden, und es verursacht Scroll-y, wenn rot rect schwebte. Wie folgt aus:

.container { 
 
    width: 210px; 
 
} 
 
.grid { 
 
    position: relative; 
 
    overflow-x: hidden; 
 
    width: 100%; 
 
    height: 210px; 
 
    background: #333344; 
 
} 
 
.grid__item { 
 
    position: absolute; 
 
    height: 200px; 
 
    width: 200px; 
 
    background: #994444; 
 
} 
 
.grid__item .grid__item-hover { 
 
    display: none; 
 
    position: absolute; 
 
    bottom: -50px; 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: white; 
 
} 
 
.grid__item:hover .grid__item-hover { 
 
    display: block; 
 
} 
 
.grid__item:nth-child(1) { 
 
    left: 5px; 
 
    top: 5px; 
 
} 
 
.grid__item:nth-child(2) { 
 
    left: 210px; 
 
    top: 5px; 
 
} 
 
.bar { 
 
    height: 100px; 
 
    background: #aaaaaa; 
 
}
<div class="container"> 
 
    <div class="grid"> 
 
    <div class="grid__item"> 
 
     <div class="grid__item-hover"></div> 
 
    </div> 
 
    <div class="grid__item"> 
 
     <div class="grid__item-hover"></div> 
 
    </div> 
 
    </div> 
 
    <div class="bar"></div> 
 
</div>

Need Lösung ohne Javascript.

+0

Nicht sicher, dass Sie die Bildlaufleiste einfach "ausblenden" können. Es ist da, wenn eine Schriftrolle verfügbar ist. Sie könnten es wahrscheinlich hacken und vielleicht die Bildlaufleiste außerhalb des Elements haben (mit 'overflow: hidden', um es zu verstecken), aber das ist keine sehr einfache Lösung. Siehe: http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page – Narxx

Antwort

0

Liegt das daran, dass Ihre .grid-Breite größer als Ihre Containerbreite ist? das heißt

container { 
    width: 210px; 
} 

.grid { 
    width: 100%; 
} 

I .grid Breite von 100% sage, ist größer als Behälterbreite von 210px, damit die Bildlaufleiste erscheint. Versuchen Sie, die Containerbreite größer als die Gitterbreite zu machen.

+0

'100%' bedeutet, dass die Gitterbreite genau der Containerbreite entspricht. Auch wenn es reibe, ist es egal, denn das ist vertikale Scroll, es hängt von der Höhe ab, nicht von der Breite. – cassln

Verwandte Themen