Scrollbar in CSS deaktivieren
-
Setzen Sie
overflowaufhiddenfür die Tagshtmlundbody, um die Bildlaufleiste in CSS zu deaktivieren -
Setzen Sie
overflow-xaufhidden, um die horizontale Bildlaufleiste in CSS zu deaktivieren
In diesem Tutorial werden einige Methoden zum Deaktivieren der Funktionalität der Bildlaufleiste auf einer Webseite vorgestellt.
Setzen Sie overflow auf hidden für die Tags html und body, um die Bildlaufleiste in CSS zu deaktivieren
Wir können die CSS-Eigenschaft overflow verwenden, um die Bildlaufleiste in CSS zu deaktivieren. Die Eigenschaft overflow definiert das Verhalten der Bildlaufleiste in einer Webseite. Die Bildlaufleiste kann ausgeblendet oder sichtbar gemacht werden, wenn der Inhalt eines Elements größer als der angegebene Bereich ist. Wenn wir den Wert hidden für die Eigenschaft overflow verwenden, wird der Inhalt auf den Bereich des Elements abgeschnitten und der Rest des Elements wird unsichtbar. Wir können es auf scroll setzen, um eine Bildlaufleiste hinzuzufügen, um den Rest des nicht abgeschnittenen Inhalts anzuzeigen. Wir werden PHP verwenden, um einen Langtext auf unserer Webseite zu generieren. Dann deaktivieren wir die Bildlaufleiste.
Erstellen Sie beispielsweise in PHP eine Variable $text und geben Sie ihr den Wert Hello World. Verwenden Sie die for-Schleife, um sie 100 Mal zu durchlaufen. Vergessen Sie nicht, das Tag br hinzuzufügen, während Sie die Variable anzeigen. Dadurch entstehen 100 Zeilen des Textes Hello World. Fügen Sie das PHP in den body des HTML ein. Wählen Sie im CSS die Tags html und body aus. Setzen Sie den Rand auf 0 und geben Sie als Höhe 100% an. Setzen Sie dann die Eigenschaft overflow auf ausgeblendet.
Im folgenden Beispiel haben wir die height von html und body auf 100% gesetzt. Das bedeutet, dass body und height 100% der Höhe ihrer übergeordneten Container haben. Die Höhe dieser Container entspricht der Höhe des Browsers. Der Text wird auf die Höhe des Browsers abgeschnitten und der Rest ist unsichtbar. Wir können die Eigenschaft margin sogar auf 0 setzen, wenn der Rand mit einem anderen Wert überschrieben wurde, um die Bildlaufleiste zu deaktivieren. Wir können sogar overflow-y anstelle von overflow verwenden und auf hidden setzen. Dadurch wird die Bildlaufleiste vertikal deaktiviert.
Beispielcode:
<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
html, body
{
height: 100%;
overflow: hidden
}
Setzen Sie overflow-x auf hidden, um die horizontale Bildlaufleiste in CSS zu deaktivieren
Wir können die Eigenschaft overflow-x verwenden und auf hidden setzen, um die horizontale Bildlaufleiste in CSS zu deaktivieren. Wir können die Deaktivierung der Bildlaufleiste horizontal testen, indem wir einen Text auf nur eine Zeile beschränken. Wir können einen Text in PHP mehrmals durchlaufen und mit CSS erzwingen, dass er in einer Zeile angezeigt wird.
Schleifen Sie beispielsweise den Text Helloo World mit PHP wie in der obigen Methode. Verwenden Sie kein br-Tag, damit der Text nicht in der nächsten Zeile erscheint. Setzen Sie in CSS die Eigenschaft display für das Tag body auf inline-block. Setzen Sie die Eigenschaft white-space im html-Tag auf nowrap. Stellen Sie dann overflow-x auf hidden und wählen Sie das Tag body aus.
Wenn wir display auf inline-block setzen, erzwingt dies, dass der Text in einer einzigen Zeile angezeigt wird. Um den Text in einer einzigen Zeile zu erhalten, müssen wir die Eigenschaft white-space des übergeordneten Containers auf nowrap setzen. Bis jetzt hat die horizontale Bildlaufleiste gut funktioniert. Wenn Sie das overflow-x auf hidden setzen, wird der Text entsprechend dem Ansichtsfenster abgeschnitten und die horizontale Bildlaufleiste wird deaktiviert.
Beispielcode:
<body>
<?php
$text = "Helloo World";
for($i=0; $i<100; $i++){
echo $text;
}
?>
</body>
html{
white-space:nowrap;
}
body {
display:inline-block;
overflow-x: hidden
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn