下記のようにHTMLとCSSを作ってみました。
サイドメニュー上でマウスをスクロールさせ、サイドメニューが全部表示されている場合(もしくはサイドメニューを下までスクロールしきった場合)は、コンテンツ側をスクロールさせたいのですが、やりかたがわかりません。
なにか方法はないかと思って下記ページをみてみましたが、やはりサイドメニューとメインコンテンツ側は独立しており、サイドメニュー上でマウスをスクロールしたとしても、コンテンツ側がスクロールすることはありませんでした。
- https://stackoverflow.com/questions/48107353/allow-one-grid-item-to-scroll-with-fixed-header-and-sidebar
- https://stackoverflow.com/questions/58562531/css-grid-with-fixed-sidebar
一方、CSSグリッドを使用しない以下の方法はサイドメニュー上でマウスをスクロールするとコンテンツ側がスクロールして内容を下部まで表示することができました。
- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sidenav_fixed2
- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sidenav_fixed
違いはなんなのでしょうか?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>