1

以下のように、それぞれスクロール可能な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>

1 件の回答 1

2

もしピンク領域にリンクなどを載せないのであれば、cssで.modalに

  pointer-events:none;

を加えればスクロールできるようになります。

https://codepen.io/greenmoonslug/pen/WNMKobG

これを入れるとピンク領域は『見た目だけ』の存在になり、下にある黄色や水色の領域はピンク領域に邪魔されずにスクロールできるようになるという仕組みです。

1
  • 目から鱗です。無事解決しました、ありがとうございます。
    – roki
    Commented 2022年6月5日 6:58

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。