So deaktivieren Sie das Scrollen von Seiten in CSS

Bei der Webentwicklung müssen wir häufig bestimmte Seitenelemente reparieren und verhindern, dass sie mit dem Scrollrad gleiten oder den Bildschirm berühren. Derzeit bietet CSS einige Methoden, um das Scrollen der Seite zu verhindern. In diesem Artikel werden die Implementierungsschritte und Verwendungsszenarien dieser Methoden ausführlich vorgestellt.

1. Deaktivieren Sie das Scrollen der gesamten Seite

1. Verwenden Sie das Überlaufattribut

overflow ist ein Steuerelement in CSS-Eigenschaften für Überlaufinhalte. Zu seinen Werten gehören sichtbar, ausgeblendet, scrollen, automatisch usw. Um das Scrollen der gesamten Seite zu deaktivieren, müssen wir nur den folgenden Stil zum Stammelement HTML oder Body der gesamten Seite hinzufügen:

html,body{
overflow: versteckt;#🎜 🎜#}# 🎜🎜#
Das Prinzip dieser Methode ist sehr einfach: Der Überlaufteil der Seitenelemente wird ausgeblendet, wodurch das Scrollen der Seite verhindert wird.

Positions- und Top-Attribute verwenden

2. Diese Methode muss ein Containerelement hinzufügen, um den Seiteninhalt zu umschließen, und dann eine feste Positionierung festlegen Containerelement und Top-Attribut, um das Scrollen der Seite zu verhindern. Der spezifische Stil ist wie folgt:

.container{

Position: fest;

oben: 0;
links: 0;
rechts: 0; #🎜🎜 #bottom: 0;
}

Hier ist die Positionierungsmethode des Containerelements auf „Fest“ eingestellt, was bedeutet, dass es relativ zum Ansichtsfenster und zum oberen Attribut fixiert ist Dies bedeutet, dass der Abstand zwischen dem Element und dem oberen Rand des Ansichtsfensters 0 beträgt. Dies bedeutet, dass der Seiteninhalt oben im Ansichtsfenster fixiert wird, wodurch das Scrollen der Seite verhindert wird.

2. Deaktivieren Sie das Scrollen einiger Elemente

Verwenden Sie das Überlaufattribut

1. Diese Methode und die Methode zum Verbot Scrollen der gesamten Seite Dasselbe gilt, setzen Sie einfach das Überlaufattribut des Elements, das das Scrollen verhindert, auf Ausgeblendet, zum Beispiel:

.content{

overflow: versteckt;

}#🎜 🎜##🎜 🎜#

Positions- und Top-Attribute verwenden

Ähnlich wie bei der Methode, das Scrollen der gesamten Seite zu verhindern, müssen wir ein Containerelement hinzufügen, um das Element einzuschließen Das muss am Scrollen gehindert werden und dem Container eine feste Positionierung und Top-Attribute zum Element hinzufügen, zum Beispiel:

2. .wrapper{
position: fixiert;

top: 0;

left: 0;

right : 0;

}
.content{
height: 1000px;
overflow: auto;
}

Hier müssen Sie das Scrollen deaktivieren. Das Element wird innerhalb des Containerelements platziert und dem Element wird der Stil „overflow: auto“ hinzugefügt, um nach Überschreiten der Größe automatisch die Bildlaufleiste anzuzeigen Implementiert den Effekt des Verhinderns des Scrollens basierend auf der oben genannten Methode.

Das Obige ist die CSS-Methode, um das Scrollen von Seiten zu verhindern. Es ist jedoch zu beachten, dass diese Methode nur das Scrollen der Seite beeinträchtigt. Tatsächlich können Benutzer die Seite weiterhin durch andere Vorgänge scrollen, z. B. durch Vorwärts- und Rückwärtsbewegen des Browsers, Ziehen der Bildlaufleiste usw. Daher müssen in konkreten praktischen Anwendungen entsprechende Optimierungen und Verbesserungen entsprechend den spezifischen Anforderungen durchgeführt werden.

Das obige ist der detaillierte Inhalt vonSo deaktivieren Sie das Scrollen von Seiten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!