Heim >Web-Frontend >CSS-Tutorial >Codebeispiel für das Ausblenden der Bildlaufleiste in CSS
Codebeispiel für das Ausblenden der Bildlaufleiste in CSS
- 黄舟Original
- 2017-10-25 09:53:332053Durchsuche
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> 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> 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!