CSS オーバーフロープロパティはスクロールバーの設定とスクロールバーの非表示をどのように実装しますか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS オーバーフロープロパティはスクロールバーの設定とスクロールバーの非表示をどのように実装しますか?

藏色散人

Aug 30, 2018 pm 03:43 PM

この記事では、CSSのoverflow属性を使って水平スクロールバーと垂直スクロールバーを設定し、必要に応じてスクロールバーを非表示にする方法を主に紹介します。 Web 開発を設計するとき、特定のページの特定の部分にスクロールバースタイルを追加する必要があることは明らかです。スクロールバーが使用される理由は、ユーザーが読みやすいようにコンテンツを読みすぎるためです。スクロールバーこのようにして、あふれる Web コンテンツを自由にプルできるという目的が達成されます。

ただし、見た目の美しさの観点からは、スクロールバーを非表示にした方が良い場合もあります。

以下、具体的なコード例を通して詳しく紹介していきます。

CSS の overflow 属性を使用してスクロールバー を設定するための具体的なコード例は次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css中overflow属性设置滚动条的具体用法示例</title>
    <style>
        .a1
        {
            background-color: #acffcb;
            width:100px;
            height:100px;
            overflow:scroll;
        }
        .a2
        {
            background-color: #a7fcff;
            width:100px;
            height:100px;
            overflow:hidden;
        }
        .a3
{
    margin-top: 10px;
    background-color: #ccccff;
    width:100px;
    height:100px;
    overflow:scroll;
    overflow-x:hidden;
}
     </style>
</head>
<body>
<div class="a1">css overflow属性实现横向纵向滚动条，css overflow属性实现横向纵向滚动条</div>
<div class="a2">css overflow属性实现隐藏全部滚动条，css overflow属性实现隐藏全部滚动条</div>
<div class="a3">css overflow属性实现隐藏竖向滚动条，css overflow属性实现隐藏竖向滚动条</div>
</body>
</html>

ログイン後にコピー

ブラウザでアクセスした場合の上記のコードの効果は次のとおりです。

CSS オーバーフロープロパティはスクロールバーの設定とスクロールバーの非表示をどのように実装しますか?

図からわかるように、a1 にオーバーフロースクロールスタイル属性を追加した後、固定サイズの div ブロック内のテキストが多すぎて完全に表示されない場合は、プルすることができます。スクロールバーをクリックして残りのテキストを表示します。

オーバーフローのスクロール属性はスクロールバーの設定を表します。

CSS オーバーフローの非表示スタイル属性を a2 に追加すると、すべてのスクロールバーが削除されます。そして、残りのテキストを表示する方法はありません。 a3 のスタイルをもう一度見てみましょう。ここでは、overflow-x:hidden スタイル属性を追加した後、水平スクロールバーを非表示にします。

上記の説明から、私たちは知ることができます。 CSS のオーバーフロー属性を使用してスクロールバーを設定したい場合は、オーバーフロースクロール属性をマスターするだけです。また、水平または垂直スクロールバーを非表示または削除したい場合は、hidden、overflow-x、および overflow-y のプロパティを理解するだけで済みます。 overflow-x は水平スクロールバー、overflow-y は垂直スクロールバーを表し、hidden は非表示にするかどうかを設定できます。

この記事は一定の参考価値があるので、困っている友達に役立つことを願っています!

以上がCSS オーバーフロープロパティはスクロールバーの設定とスクロールバーの非表示をどのように実装しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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