🎃
【React】モーダル表示時のスクロールバー固定をサクッと実装する【body-scroll-lock】
個人的に開発に携わっているプロダクト(React×TypeScript)で、「モーダルを表示しているときは背面をスクロールできないようにしたい(本記事では「スクロールロック」と呼称)」というニーズが出てきたので調べてみた。
ざっとGoogleで検索してみたところCSSでスクロールロックをする記事がそれなりにHitしたが、うーん、ちょっと実装めんどくさいなあ・・
→もうそういう「スクロールロックすること」に特化したライブラリはないのかー！
→あったー！ willmcpo/body-scroll-lock: Body scroll locking that just works with everything 😏
body-scroll-lock(BSL)って？
その名の通り、スクロールバーのロックをしたり、そのロックの解除をしたりする機能を提供しているライブラリ。公式が特徴として謳っているのは、
- ターゲット要素のスクロールを無効にすることなく、ボディのスクロールを無効にできる
- Chrome, Firefox, Safari desktop, Android, iOS mobile/tabletまで、
幅広くスクロールロック機能を提供できる - React, Angular, VueJSといったフレームワークとも組み合わせ可能
などなど。自分のところは「とりあえずPCから、Chromeで動けばOK」レベルのなんちゃってプロダクトだが、スクロール関係で悪さを起こしがちなiOS Safariにも対応している(自分で確かめたわけではない)のは嬉しくなる人が多そう。
React(function component)での使い方
公式のREADMEに記載はあるが、class component...😭
ということで、function componentでの簡単な利用例を実装してみた。
参考
Discussion