【CSS】ページのスクロールを禁止にする

CSSでページのスクロールを禁止する方法を紹介します。

モーダル表示時等に背景をスクロールさせたくない場合などに使用します。

サンプル

html,body {
  overflow: hidden;
}

たったこれだけです。超カンタン…！

横スクロールのみ禁止にする

html,body {
  overflow-x: hidden;
}

横スクロールのみを禁止にしたい場合は、 overflow-x: hidden; を指定します。
サイトを作る際は、基本的に横スクロールはさせないような作りにすると思うので、こちらのほうが重宝するかもしれません。