WEB/システム/IT技術ブログ

ブラウザまたはブラウザ表示中コンテンツ内のスクロールバーを隠す

コンテンツの縦・横幅をブラウザサイズに合わせたい、または、ポップアップ画面を表示するといった場合に、スクロールバーを消すことがあります。

HTML内のブロック要素に対してスクロールバーを消すにはCSSで以下のようにします。

<div class="sample">
このエリア内のコンテンツが溢れてもスクロールバーを表示しないようにする
</div>
div.sample{
	overflow: hidden;
}

ブラウザ全体としてスクロールバーを消す場合は上記の指定をbodyタグに適用します。
しかし、IEの場合にはそれだけでは消えません。IEに適用するためにはHTMLタグにも指定する必要があります。

html, body{
	overflow: hidden;
}

ちなみにですが、インラインフレームなど使う場合はまた違います。
Firefoxなどのブラウザでは

iframe{
	overflow: hidden;
}

は有効ですが、IEでは直接htmlタグに属性として指定しなければなりません。

<iframe scrolling="no">
このiframe内のコンテンツが溢れてもスクロールバーを表示しないようにする
</iframe>

クロスブラウザ!めんどくさいですね。

B!

Comment

コメントはありません

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Monthly Archives