[HTML & CSS General] Modal や Menu を開いた時に背景のページスクロールを止める

ちょっと memo.

大まかな手順としては下記になりますね。

– `body` に `position: “fixed”` を付与する。
– スクロール量を覚えておき、閉じたときに戻す。

> – [Prevent Page Scrolling When a Modal is Open | CSS-Tricks](https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/)
> – [モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック | コリス](https://coliss.com/articles/build-websites/operation/javascript/prevent-page-scrolling-when-a-modal-is-open.html)

後は実装にあわせて調整します。

– クリックすると `collapsed` というクラスが追加されるボタンがある。
– `collapsed` のあるなしで開いているか閉じているかを判定。
– 横幅がずれないように `width` を。ヘッダーの処理で `margin-top` をここでは調整している。

該当箇所をちょっと抜き出したコード。

“`javascript
const win = $(window);

$(“.navbar-toggler”).on(“click”, function() {
if ($(this).hasClass(“collapsed”)) {
const position = win.scrollTop();

$(“body”).css({
position: “fixed”,
top: -1 * position,
width: “100vw”,
marginTop: 0
});
} else {
const position = $(“body”).css(“top”);

$(“body”).css({
position: “”,
top: “”,
width: “inherit”,
marginTop: “46px”
});

win.scrollTop(parseInt(position, 10) * -1);
}
});
“`