CSS でスクロールバーを無効にする
-
CSS でスクロールバーを無効にするには、
htmlタグとbodyタグのoverflowをhiddenに設定する -
CSS で水平スクロールバーを無効にするには、
overflow-xをhiddenに設定する
このチュートリアルでは、Web ページのスクロールバーの機能を無効にするいくつかの方法を紹介します。
CSS でスクロールバーを無効にするには、html タグと body タグの overflow を hidden に設定する
CSS の overflow プロパティを使用して、CSS のスクロールバーを無効にすることができます。overflow プロパティは、Web ページのスクロールバーの動作を定義します。要素のコンテンツが指定された領域よりも大きい場合、スクロールバーを非表示または表示にすることができます。overflow プロパティに hidden 値を使用すると、コンテンツは要素の領域にクリップされ、要素の残りの部分は非表示になります。scroll に設定してスクロールバーを追加し、クリップされていない残りのコンテンツを表示できます。PHP を使用して、Web ページに長いテキストを生成します。次に、スクロールバーを無効にします。
たとえば、PHP で変数 $text を作成し、それに値 Hello World を指定します。for ループを使用して、100 回繰り返します。変数を表示するときに、br タグを追加することを忘れないでください。これにより、100 行のテキスト Hello World が作成されます。HTML の本体内に PHP を含めます。CSS で、html タグと body タグを選択します。マージンを 0 に設定し、高さを 100%にします。次に、overflow プロパティを hidden に設定します。
以下の例では、html と body の height を 100%に設定しています。これは、body と height の親コンテナの高さが 100％になることを意味します。これらのコンテナの高さは、ブラウザの高さと同じになります。テキストはブラウザの高さにクリップされ、残りは非表示になります。マージンが他の値で上書きされてスクロールバーが無効になっている場合は、margin プロパティを 0 に設定することもできます。overflow の代わりに overflow-y を使用して、hidden に設定することもできます。スクロールバーを垂直方向に無効にします。
サンプルコード：
<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
html, body
{
height: 100%;
overflow: hidden
}
CSS で水平スクロールバーを無効にするには、overflow-x を hidden に設定する
overflow-x プロパティを使用して hidden に設定すると、CSS の水平スクロールバーを無効にできます。テキストを 1 行だけに制限することで、スクロールバーの無効化を水平方向にテストできます。PHP でテキストを複数回ループし、CSS を使用してテキストを強制的に 1 行に表示することができます。
たとえば、上記の方法のように PHP を使用してテキスト Helloo World をループします。次の行にテキストが表示されないように、br タグを使用しないでください。CSS で、body タグの display プロパティを inline-block に設定します。html タグで white-space プロパティを nowrap に設定します。次に、overflow-x を hidden に設定し、body タグを選択します。
display を inline-block に設定すると、テキストが 1 行で表示されます。1 行でテキストを表示するには、親コンテナの white-space プロパティを nowrap に設定する必要があります。これまで、水平スクロールバーは正常に機能していました。overflow-x を hidden に設定すると、ビューポートに従ってテキストがクリップされ、水平スクロールバーが無効になります。
サンプルコード：
<body>
<?php
$text = "Helloo World";
for($i=0; $i<100; $i++){
echo $text;
}
?>
</body>
html{
white-space:nowrap;
}
body {
display:inline-block;
overflow-x: hidden
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn