ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用してスクロール バーを非表示にするコード例

CSS を使用してスクロール バーを非表示にするコード例

黄舟
黄舟オリジナル
2017-10-25 09:53:332024ブラウズ

overflow 属性は、コンテンツが要素ボックス

①visible のデフォルト値からオーバーフローした場合に何が起こるかを指定します。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。
②非表示のコンテンツはトリミングされ、残りのコンテンツは見えなくなります。
③スクロール コンテンツはトリミングされますが、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
④自動 コンテンツがトリミングされた場合、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
⑤inherit は、overflow 属性の値を親要素から継承することを指定します。

例1: テーブルをコンテナとして使用し、スクロールバーを[非表示]にする

注: {①テーブルの表示をブロックに設定します。そうでない場合、スクロールバーは表示されません}

まずテーブルをa p、p の長さと幅 修正するには

垂直方向にのみスクロールしたい場合は、外側の p 属性を設定できます overflow-x: hidden;

例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动条</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        .area{width: 300px;height: 600px;background-color: #BFEFFF;
            overflow-x: hidden;position: relative}
        .area table{display: block;width: 320px;height: 600px;
            background-color: #00D685;overflow-y: auto;}
        .area table tr td{height: 200px;width: 300px}
    </style>
</head>
<body>
<p class="area">
    <table>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td>4</td></tr>
        <tr><td>5</td></tr>
        <tr><td>6</td></tr>
    </table>
</p>
</body>
</html>

ここでテーブル属性を変更することに注意してください

例 2:

ul をコンテナーとして使用し、スクロール バーを非表示にする

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动条</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        .area{width: 300px;height: 600px;background-color: #BFEFFF;
            overflow-x: hidden;
        position: relative}
        .area ul{height: 100%;width: 320px;background-color: #00D685;list-style: none;
        overflow-x: hidden;overflow-y: auto}
        .area ul li{height: 200px;width: 100%;background-color: #cccccc}
    </style>
</head>
<body>
<p class="area">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</p>
</body>
</html>

原則: コンテナーの外側に overflow:hidden の別のレイヤーをネストし、内部コンテンツのサイズを外部のネスト レイヤーと同じサイズに制限します。だからそれは変装して隠されています。

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

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