採用技術にフォーカスしたWebサイトリンク集。
トレンドリサーチや技術選定の参考に、WEBデザインやコーディング、開発の参考にも使えるWebサイトギャラリー。
Check WebTech

BodyScrollLock.js が採用されたサイト事例一覧です。

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