検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでドロップダウンスクロールバーを非表示にする方法

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

王林
王林オリジナル
2021-05-14 14:42:094671ブラウズ

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>

関連ビデオ チュートリアル:

css ビデオ チュートリアル

以上がCSSでドロップダウンスクロールバーを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSで背景画像を設定する方法次の記事：CSSで背景画像を設定する方法

関連記事

続きを見る