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