ブラウザまたはブラウザ表示中コンテンツ内のスクロールバーを隠す
コンテンツの縦・横幅をブラウザサイズに合わせたい、または、ポップアップ画面を表示するといった場合に、スクロールバーを消すことがあります。
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>
クロスブラウザ!めんどくさいですね。
コメントする