Home
CSS
CSSでサイトのスクロールを無効にする方法

CSSでサイトのスクロールを無効にする方法

公開日
2021.10.30
更新日
2022.04.02
CSSでサイトのスクロールを無効にする方法

どうも!かけちまるです!

サイトのスクロールを一時的に無効にしたいことがあると思います。
例えば、モーダルウィンドウが開いている時や、OPアニメーション後に必ずメインビジュアルを見せたい時などにこれから紹介するスクロールを無効にする方法が使えると思います。

この記事では、

  • ・オススメはJSで実装する方法である
  • ・CSSでスクロールを無効にする方法

がわかります。

オススメはJSで実装する方法である

CSSでスクロール無効が実装可能ですがいくつか弊害があるのでJavaScriptで実装することをおすすめします。

その弊害というのが、

  • ・iOSでは動作しない
  • ・結局スクロールする&させないを切り分けるのはJavaScriptである
  • ・CSSの指定の仕方によっては挙動がおかしくなる

の3つなのでJavaScriptでスクロールを無効にする方法をマスターすることをオススメします。

CSSでスクロールを無効にする

この記事ではボタンをクリックすることによってスクロールを無効&有効を切り替れるようにしていきます。

実装例はこちらです。

CSSの解説

bodyタグにoverflow: hidden;を指定することによってスクロールを無効にすることができます。
以下のコードは.no_scrollクラスをJavaScriptで追加・削除することによってスクロールする・しないを分けるための記述になります。

CSS
コピー
body.no_scroll{ overflow: hidden; }

JavaScriptの解説

JavaScript
コピー
$('#off').on('click', function(){ $('body').addClass('no_scroll'); }); $('#on').on('click', function(){ $('body').removeClass('no_scroll'); });

1行目 | id=”off”をクリックした時

bodyタグに.no_scrollを追加するとoverflow: hidden;が当てられるのでスクロールを無効にできます。

5行目 | id=”on”をクリックした時

bodyタグから.no_scrollを削除するとoverflow: hidden;が外れるのでスクロールを有効にできます。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【セキュリティ対策】WP Cerber Securityの設定方法

【セキュリティ対策】WP Cerber Securityの設定方法

特定のブラウザのみにCSSを適応させるハック

特定のブラウザのみにCSSを適応させるハック

画像のみにAccess-Control-Allow-Originを設定する方法

画像のみにAccess-Control-Allow-Originを設定する方法

コピペで完了!CSSグラデーション(linear-gradient)まとめ

コピペで完了!CSSグラデーション(linear-gradient)まとめ

【レスポンシブ対応】Facebook・Twitterのタイムライン埋め込み方法

【レスポンシブ対応】Facebook・Twitterのタイムライン埋め込み方法

Three.jsテクスチャをGLSLでbacground-size: cover;のようにする

Three.jsテクスチャをGLSLでbacground-size: cover;のようにする