Scrollbar in CSS deaktivieren
-
Setzen Sie
overflow
aufhidden
für die Tagshtml
undbody
, um die Bildlaufleiste in CSS zu deaktivieren -
Setzen Sie
overflow-x
aufhidden
, um die horizontale Bildlaufleiste in CSS zu deaktivieren
![Scrollbar in CSS deaktivieren](/img/CSS/feature-image---disable-scroll-css.webp)
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