Why BSL?
Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus).
Features:
disables body scroll WITHOUT disabling scroll of a target element
works on iOS mobile/tablet (!!)
works on Android
works on Safari desktop
works on Chrome/Firefox
works with vanilla JS and frameworks such as React / Angular / VueJS
supports nested target elements (eg. a modal that appears on top of a flyout)
can reserve scrollbar width
-webkit-overflow-scrolling: touch still works
（DeepL翻訳）
なぜBSLなのか？
ターゲットエレメント（モーダル/ライトボックス/フライアウト/ナビメニューなど）のスクロールを中断することなく、ボディスクロールのロックを可能にします（iOSモバイルとタブレット、Android、デスクトップSafari/Chrome/Firefoxの場合）。
特徴
ターゲット要素のスクロールを無効にすることなく、ボディのスクロールを無効にします。
iOSモバイル/タブレットで動作（！）。
Androidで動作
デスクトップ版Safariで動作します。
Chrome/Firefoxで動作します。
バニラJSとReact/Angular/VueJSのようなフレームワークで動作します。
ネストされたターゲット要素に対応（例：フライアウトの上に表示されるモーダル）。
スクロールバーの幅を確保できる
-webkit-overflow-scrolling: タッチ操作でも動作します。

https://github.com/willmcpo/body-scroll-lock