ホームページ > 記事 > ウェブフロントエンド > CSSでスクロールバーを追加する方法

CSSでスクロールバーを追加する方法

王林オリジナル: 2021-07-12 16:48:055626ブラウズ

CSS でスクロールバーを追加する方法は、div に overflow 属性を追加し、[overflow:scroll;] のように属性値をスクロールに設定します。 overflow 属性は、コンテンツがオーバーフローしたときに何が起こるかを指定します。

CSSでスクロールバーを追加する方法

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

スクロールバーを追加するのは実際には非常に簡単で、コンテンツが要素のボックスからオーバーフローした場合に何が起こるかを指定する属性オーバーフローがあります。

属性値を見てみましょう:

visible デフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。

hidden コンテンツはトリミングされ、残りのコンテンツは非表示になります。

scroll コンテンツはトリミングされますが、ブラウザには残りのコンテンツを表示するためのスクロールバーが表示されます。

auto コンテンツがトリミングされると、ブラウザには残りのコンテンツを表示するためのスクロールバーが表示されます。

inherit は、オーバーフロー属性の値を親要素から継承することを指定します。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div.ex1 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: scroll;
}

div.ex2 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: hidden;
}

div.ex3 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: auto;
}

div.ex4 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: visible;
}
</style>
</head>
<body>
<h1>overflow 属性</h1>

<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<h2>overflow: scroll:</h2>
<div class="ex1">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>

<h2>overflow: hidden:</h2>
<div class="ex2">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>

<h2>overflow: auto:</h2>
<div class="ex3">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>

<h2>overflow: visible (默认):</h2>
<div class="ex4">php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！php中文网，梦开始的地方！</div>

</body>
</html>

上記のコードをローカルにコピーし、ローカルで実行して効果を確認できます。

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

css ビデオチュートリアル

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

声明：

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

前の記事：CSSで斜体を設定する方法次の記事：CSSで斜体を設定する方法

続きを見る