CSS を使用してスクロールバーを非表示にするコード例-CSSチュートリアル-php.cn

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

黄舟

リリース： 2017-10-25 09:53:33

オリジナル

2125 人が閲覧しました

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>