今回はモーダルを実装した時などにユーザーに画面スクロールをさせない方法を解説します。
解説
コードの全体像
TypeScriptで記述していきます。
使いまわせるようにexportしていますが不要であれば外してください。
export default class FixedBody {
body = document.body;
fixed = () => {
const pageYOffset = window.pageYOffset * -1;
this.body.style.position = 'fixed';
this.body.style.width = '100%';
this.body.style.top = `${pageYOffset}px`;
}
release = () => {
const offset = parseFloat(window.getComputedStyle(this.body).getPropertyValue('top')) * -1;
this.body.style.cssText = '';
scrollTo({ top: offset });
}
}
fixedで実行している内容の解説
まずwindow.pageYOffsetで現在のスクロール量を取得します。
この時、bodyを現在のスクロール量と同じ数値でずらすために符号を逆転させておきます。
あとはbodyをposition:fixedで固定し、先ほど取得したpageYoffsetをstyle.topに代入してあげればOKです。
releaseで実行している内容の解説
bodyのstyle.topに指定されている値を取得して変数offsetに代入します。
代入時に先ほどと同じように符号を逆転させておきます。
parseFloatは文字列を浮動小数点数に変換する関数です。
その後、bodyのstyleをリセットし、fixedを解除します。
最後にscrollToで元のスクロール位置に戻します。
終わり
以上となります。
あとはこれをモーダル等の実装時にインスタンス化して使用すればOKです。