HTML-Deaktivierung des Scrollens ist eine häufige Anforderung, insbesondere wenn die Webseite besondere Anforderungen an die interaktive Leistung oder das Design stellt. Das Deaktivieren des Scrollens sorgt nicht nur dafür, dass Benutzer konzentriert bleiben, sondern vermeidet auch die durch das Scrollen verursachte Unordnung. In diesem Artikel erfahren Sie, wie Sie den Scroll-Deaktivierungseffekt über HTML und CSS erzielen.

1. Deaktivieren Sie das Scrollen durch HTML-Attribute.

Es gibt ein häufig verwendetes Attribut in HTML namens Overflow. Dieses Attribut wird hauptsächlich verwendet, um die Behandlungsmethode für den Überlaufinhalt des Elements festzulegen. Insbesondere können Sie die folgenden Werte festlegen:

• auto – Wenn der Inhalt überläuft, fügt der Browser ihn automatisch hinzu Scrollbalken zum Element.
• sichtbar – Wenn der Inhalt überläuft, zeigt der Browser den überlaufenden Inhalt außerhalb des Elements an.
• hidden – Wenn der Inhalt überläuft, blendet der Browser den überlaufenden Inhalt aus.
• scroll – Der Browser zeigt immer Bildlaufleisten an, wenn der Inhalt überläuft.
• inherit – der vom übergeordneten Element übernommene Wert.

Wenn wir das Scrollen der Seite oder eines bestimmten Elements verbieten möchten, müssen wir nur den Überlaufwert auf versteckt setzen.

Das Folgende ist ein einfacher HTML-Beispielcode:

     
  
禁止页面滚动示例
 
这是一段文字内容
 
这是另一段文字内容
  

In diesem Code setzen wir overflow:hidden auf das Body-Element, sodass die Seite nicht gescrollt werden kann. Wenn Sie das Scrollen eines bestimmten Elements deaktivieren müssen, müssen Sie nur das entsprechende Element auswählen und den entsprechenden Wert festlegen.

2. Scrollen durch CSS-Stile deaktivieren

Zusätzlich zum Deaktivieren des Scrollens durch HTML-Attribute können wir den gleichen Effekt auch über CSS-Stile erzielen. Die spezifische Methode besteht darin, dem entsprechenden Element eine feste Positionierung hinzuzufügen, seine Breite und Höhe auf 100 % festzulegen und dann den Überlaufwert auf „Auto“ oder „Ausgeblendet“ zu setzen.

Das Folgende ist ein Beispielcode:

     
  
禁止滚动示例
 
 
 
这是一段居中的文字内容
 示例按钮 
 
 
这是另一段文字内容
  

In diesem Beispielcode erstellen wir zunächst eine Maskenebene, legen den entsprechenden Stil dafür fest und legen deren Breite und The fest Die Höhe ist auf 100 % eingestellt und das Scrollen ist deaktiviert. Erstellen Sie ein weiteres Element mit dem Inhalt, positionieren Sie es relativ, setzen Sie den Z-Index auf 1 und legen Sie den Randwert fest, um es zu zentrieren. Die obige Maskenebene deckt direkt die gesamte Seite ab, sodass der Benutzer nur den Inhalt über der Maskenebene sehen kann und die Maskenebene selbst das Scrollen verhindert.

Zusammenfassung:

HTML-Deaktivierung des Scrollens ist eine häufige Anforderung. Wir können die entsprechende Funktion durch HTML-Attribute und CSS-Stile erreichen. Durch die Verwendung des Überlaufattributs und der festen Positionierung, um das Scrollen von Elementen zu verhindern, können die Benutzererfahrung und die Interaktionsqualität der Webseite effektiv verbessert werden.

Das obige ist der detaillierte Inhalt vonhtml Scrollen deaktivieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!