以下のように、それぞれスクロール可能な2カラムの構成の時、中央のピンクの部分のものを配置したいのですが、その上だけマウスでスクロールできなくなってしまいます。
黄色の上なら黄色、水色の上なら水色をスクロール、難しければ、水色をスクロールさせたいです。JavaScript を使わずに何か対策はありますか?
https://codepen.io/23gv4u23v5u2/pen/PoQavVm
html,
body {
margin: 0;
}
.wrap {
display: flex;
height: 100vh;
}
.left {
background: yellow;
width: 20%;
overflow-y: auto;
}
.right {
background-color: aqua;
flex: 1;
overflow-y: auto;
}
.modal {
position: fixed;
left: 0;
bottom: 40px;
display: flex;
justify-content: center;
width: 100%;
}
.modal span {
width: 50%;
height: 80px;
background: magenta;
}
<div class="wrap">
<div class="left">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div class="right">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</div>
</div>
<div class="modal">
<span></span>
</div>
position: sticky;
を使うことで以下のように動作はしたのですが、黄色部分を一番下までスクロールすると水色部分のスクロールも動き出すため完全解決に至っていません。
https://codepen.io/23gv4u23v5u2/pen/zYRLqJe
html,
body {
margin: 0;
}
.wrap {
display: flex;
}
.left {
background: yellow;
width: 20%;
height: 100vh;
overflow-y: auto;
position: sticky;
top: 0;
}
.right {
background-color: aqua;
flex: 1;
overflow-y: auto;
}
.modal {
position: fixed;
left: 0;
bottom: 80px;
display: flex;
justify-content: center;
width: 100%;
}
.modal span {
width: 50%;
height: 80px;
background: magenta;
}
<div class="wrap">
<div class="left">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div class="right">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</div>
</div>
<div class="modal">
<span></span>
</div>