Skip to main content
4 / 4
コードを実行可能なスニペットに変更
harry0000
  • 2,800
  • 4
  • 18
  • 22

CSSグリッドでサイドメニュー固定を作ったが、サイドメニュー上でマウスをスクロールさせてもメインコンテンツ側がスクロールしない

下記のようにHTMLとCSSを作ってみました。
サイドメニュー上でマウスをスクロールさせ、サイドメニューが全部表示されている場合(もしくはサイドメニューを下までスクロールしきった場合)は、コンテンツ側をスクロールさせたいのですが、やりかたがわかりません。

なにか方法はないかと思って下記ページをみてみましたが、やはりサイドメニューとメインコンテンツ側は独立しており、サイドメニュー上でマウスをスクロールしたとしても、コンテンツ側がスクロールすることはありませんでした。

一方、CSSグリッドを使用しない以下の方法はサイドメニュー上でマウスをスクロールするとコンテンツ側がスクロールして内容を下部まで表示することができました。

違いはなんなのでしょうか?CSSグリッドでは不可能なのでしょうか?それとも何かアプローチの仕方が違うのでしょうか?

.mainSpace {
    min-height: 100vh;
    display: grid;
    grid-template: 
        "a-side a-body" 100vh
    /   320px 1fr;
}
.mainSpaceSide {
    grid-area: a-side;
    background-color: yellow;
    overflow: scroll;
}
.mainSpaceBody {
    grid-area: a-body;
    background-color: green;
    overflow: scroll;
}
<div class="mainSpace">
    <div class="mainSpaceSide">
        start side<br>
        side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
        side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
        end side
    </div>
    <div class="mainSpaceBody">
        start main<br>
        main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
        main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
        main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
        main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
        main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>
        end main
    </div>
</div>

shingo.nakanishi
  • 6,543
  • 8
  • 59
  • 99