Skip to main content
3 / 4
本文に 3 文字追加
cubick
  • 2.1万
  • 5
  • 27
  • 64

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

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

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

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

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

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/main-space.css">
</head>
<body>
    <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>
</body>
</html>

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;
}
shingo.nakanishi
  • 6,543
  • 8
  • 59
  • 99