マガジンのカバー画像

エンジニアによるテックブログ

6
運営しているクリエイター

2021年10月の記事一覧

Body scroll lockを使用して要素のスクロール固定を制御するカスタムフックを作成する

Body scroll lockを使用して要素のスクロール固定を制御するカスタムフックを作成する

こんにちは。
イチマルイチデザインのフロントエンドエンジニアの高橋です。

今回は、Body scroll lockを使用したカスタムフックを作成して、ドロワーメニューやモーダルの展開時に、背面の要素を固定する処理を簡単かつシンプルに実装する方法を共有します。

実装方法と解説
こちらが実際のコードの全体像となります。

// useBodyScrollLock.tsimport { RefObj

もっとみる