CSSでドロップダウンスクロールバーを非表示にする方法-CSSチュートリアル-php.cn

CSSでドロップダウンスクロールバーを非表示にする方法

王林

リリース： 2023-01-06 11:13:12

オリジナル

4436 人が閲覧しました

CSS でドロップダウンスクロールバーを非表示にするには、[overflow:hidden] などのオーバーフロー属性を追加します。このとき、ドロップダウンスクロールバーは完全に非表示になります。オーバーフロー属性は、指定された高さのブロック要素に対してのみ機能することに注意してください。

CSSでドロップダウンスクロールバーを非表示にする方法

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

CSS では、overflow 属性を使用して、コンテンツが要素ボックスからオーバーフローした場合に、対応する要素範囲へのスクロールバーの追加を制御できます。

スクロールバーを非表示にし、コンテンツがオーバーフローしたときにスクロールバーを表示する必要がある場合は、overflow: auto スタイルを設定するだけです。スクロールバーを完全に非表示にしたい場合は、設定するだけです。 overflow: hidden ですが、この方法では要素のコンテンツがスクロールできなくなります。

注: オーバーフロー属性は、指定された高さのブロック要素でのみ機能します。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: visible;
}
</style>
</head>
<body>

<div id="overflowTest">
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
</div>

</body>
</html>

ログイン後にコピー