Codebeispiel für das Ausblenden der Bildlaufleiste in CSS-CSS-Tutorial-php.cn

Codebeispiel für das Ausblenden der Bildlaufleiste in CSS

黄舟

Freigeben： 2017-10-25 09:53:33

Original

2023 Leute haben es durchsucht

Das Überlaufattribut gibt an, was passiert, wenn Inhalt die Elementbox überläuft

①visible Standardwert. Der Inhalt wird nicht beschnitten und außerhalb der Elementbox gerendert.
②hidden Der Inhalt wird gekürzt und der verbleibende Inhalt ist unsichtbar.
③scroll Der Inhalt wird gekürzt, aber der Browser zeigt Bildlaufleisten an, um den verbleibenden Inhalt anzuzeigen.
④auto Wenn der Inhalt zugeschnitten wird, zeigt der Browser Bildlaufleisten an, um den verbleibenden Inhalt anzuzeigen.
⑤inherit gibt an, dass der Wert des Überlaufattributs vom übergeordneten Element geerbt werden soll.

Beispiel 1: Tabelle wird als Container verwendet und die Bildlaufleiste [versteckt]

Hinweis: {①Die Anzeige der Tabelle ist auf Blockieren eingestellt, sonst erscheint die Bildlaufleiste nicht 🎜>

Sie müssen zuerst Die Tabelle wird in einem p platziert und die Länge und Breite von p müssen festgelegt werden

Wenn Sie nur in vertikaler Richtung scrollen möchten, können Sie den Überlauf des äußeren p-Attributs festlegen. x: versteckt;

Beispiel:

<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>

Nach dem Login kopieren

Achten Sie hier auf die Änderung des Tabellenattributs

Beispiel 2:

ul wird als Container verwendet , Ausblenden der Bildlaufleiste

<!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>

Nach dem Login kopieren

Prinzip: Verschachteln Sie es außerhalb des Containers. Eine Ebene von overflow:hidden beschränkt den internen Inhalt auf die gleiche Größe wie die externe verschachtelte Ebene, sodass er verdeckt verborgen ist.

Das obige ist der detaillierte Inhalt vonCodebeispiel für das Ausblenden der Bildlaufleiste in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!