HTMLでスクロールしないようにするにはどうすればいいですか？

Webページを作成する際、要素内のコンテンツが要素の高さや幅を超えた場合、デフォルトではスクロールバーが表示されます。しかし、デザイン上の理由などにより、このスクロールバーを非表示にしたい場合があります。この記事では、HTMLでスクロールバーを非表示にする方法について解説します。

overflowプロパティ

HTML要素のスクロールバーを制御するには、CSSのoverflowプロパティを使用します。overflowプロパティには、以下の値を設定することができます。

値	説明
`visible`	コンテンツが要素の高さや幅を超えた場合、はみ出した部分がそのまま表示されます。スクロールバーは表示されません。（デフォルト）
`hidden`	コンテンツが要素の高さや幅を超えた場合、はみ出した部分は切り取られて表示されません。スクロールバーも表示されません。
`scroll`	コンテンツが要素の高さや幅を超えているかどうかに関わらず、常にスクロールバーが表示されます。
`auto`	コンテンツが要素の高さや幅を超えた場合のみ、スクロールバーが表示されます。

スクロールバーを非表示にするには、overflowプロパティにhiddenを設定します。

HTMLでの実装例

例えば、以下のようなHTMLコードがあるとします。


<div class="container">
  <p>
    このdiv要素には、たくさんのテキストが含まれています。
    テキストが長すぎて、要素の高さに収まりきりません。
  </p>
</div>

このdiv要素にスクロールバーを表示させないためには、以下のようにCSSを記述します。


.container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

上記のCSSを適用すると、div要素の幅が300px、高さが200pxに固定され、スクロールバーは表示されなくなります。テキストが要素の高さに収まらない場合は、はみ出した部分は切り取られます。

注意点

overflow: hidden; を設定すると、スクロールバーが非表示になるだけでなく、ユーザーがコンテンツ全体をスクロールして確認することができなくなります。そのため、重要な情報が隠れてしまわないよう注意が必要です。場合によっては、overflow-x や overflow-y を使用して、水平方向または垂直方向のみスクロールを無効にすることも検討しましょう。

参考資料

overflow - CSS: カスケーディングスタイルシート | MDN

よくある質問

Q1: overflow: hidden; を設定してもスクロールバーが消えない場合は？

A1: overflow: hidden; を設定する要素の子要素に、高さが固定されていない要素が含まれている可能性があります。子要素の高さを固定するか、overflow: hidden; を設定する要素を調整する必要があります。

Q2: スクロールバーは残したまま、スクロールバーの見た目を変更することはできますか？

A2: はい、可能です。スクロールバーの見た目はブラウザによって異なりますが、CSSの ::-webkit-scrollbar などの疑似要素を使用してカスタマイズすることができます。ただし、すべてのブラウザで完全に動作するとは限らないため、注意が必要です。

Q3: overflow: hidden; 以外にスクロールを無効にする方法はありますか？

A3: JavaScriptを使用してスクロールイベントを無効にする方法もあります。ただし、ユーザーエクスペリエンスの観点から、安易な使用は避けるべきです。スクロールを無効にする必要がある場合は、ユーザーに分かりやすく明示的に伝えるようにしましょう。

その他の参考記事:jquery done