Hier ist Deal, ich habe div
s, die unter overflow: hidden
platziert und müssen irgendwie verwalten, um sie zu zeigen.Zeige Elemente unter Überlauf: versteckt
.body {
display:flex;
width: 100%;
height: 100%;
}
.main-container {
background-color: #eee;
width: 560px;
height: 500px;
}
.sidebar-container {
width: 270px;
height: 100px;
}
.sidebar-container_hidden-scroll {
width: 100%;
height: 100%;
}
.sidebar-element {
width: 250px;
height: 44px;
position: relative;
box-sizing: border-box;
margin: 10px 5px;
padding: 5px;
border: 1px solid red
}
.sidebar-element__linked-div {
position: absolute;
height: 100%;
width: 500px;
border: 1px dotted red;
top: 0px;
left: calc(250px + 30px);
}
<div class="body">
<div class="sidebar-container">
<div class="sidebar-container_hidden-scroll">
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
</div>
</div>
<div class="main-container">
</div>
</div>
Nach parent:: overflow: hidden, children:: overflow: scroll
.body {
display:flex;
width: 100%;
height: 100%;
}
.main-container {
background-color: #eee;
width: 560px;
height: 500px;
}
.sidebar-container {
width: 270px;
height: 100px;
overflow-y: hidden;
overflow-x: hidden;
}
.sidebar-container_hidden-scroll {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 20px;
}
.sidebar-element {
width: 250px;
height: 44px;
position: relative;
box-sizing: border-box;
margin: 10px 5px;
padding: 5px;
border: 1px solid red
}
.sidebar-element__linked-div {
position: absolute;
height: 100%;
width: 500px;
border: 1px dotted red;
top: 0px;
left: calc(250px + 30px);
}
<div class="body">
<div class="sidebar-container">
<div class="sidebar-container_hidden-scroll">
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
<div class="sidebar-element">
<div class="sidebar-element__linked-div"></div>
<div class="sidebar-element__name">
Yellow flower
</div>
<div className="sidebar-element__capacity">
10 kg
</div>
</div>
</div>
</div>
<div class="main-container">
</div>
</div>
Der Grund, dass ich es diese Zeilen hinzugefügt Hinzufügen von Inhalten und verbergen Bildlaufleiste blättern. Mein Ziel ist es, "scrollbaren" Inhalt zu erstellen, die Bildlaufleiste zu verbergen und trotzdem gepunktete Rechtecke zu sehen. Wie kann ich das machen? (z-index
hat nicht geholfen)