106
Help us understand the problem. What are the problem?

posted at

body-scroll-lock.js「すべてのブラウザでスクロールのロックしたるで」←こいつ超有能

この記事に書いてあること

JavaScriptプラグインのbody-scroll-lock.jsの使い方について

サイトリンク

body-scroll-lock.jsとは?

ターゲット要素(モーダル/ライトボックス/フライアウト/ナビメニューなど)のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです

対象ブラウザ
iOS Mobileおよびタブレット、Android、デスクトップSafari/Chrome/Firefox

どんな時に使うか?

例えばモーダルを表示した時に、背景を固定したいといった場合に使うことができます。
モーダルの中だけスクロールを有効にして、背景固定を実現するなんてことも簡単に実装可能です。

なぜ使うの?

スクロールのロックは簡単そうに思えて、実は結構面倒くさい処理内容です。
例えば、

overflow:hidden;iOSで動作しない問題
position: fixedは、ボディのスクロールがリセットされちゃう問題

などなど、WEB製作者の頭を結構悩ませるのです。

使い方

インストール

パッケージインストール

yarn add body-scroll-lock

or

npm install body-scroll-lock

CDN
https://cdnjs.com/libraries/body-scroll-lock

Functions

対象要素以外の、ボディのスクロールを無効化

//hoge以外のスクロール禁止
bodyScrollLock.disableBodyScroll(hoge)	

対象要素の、ボディのスクロールを有効化

//hoge以外のスクロール有効化
bodyScrollLock. enableBodyScroll(hoge)	

全てのスクロール禁止を解除

bodyScrollLock.clearAllBodyScrollLocks( )
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
106
Help us understand the problem. What are the problem?