HTML-Sliding deaktivieren

HTML deaktiviert das Schieben – wie implementiert man es?

Beim Webdesign und der Webentwicklung ist das Gleiten eine wichtige Interaktionsmethode. In einigen Fällen möchten wir jedoch das Verschieben von Webseiten verbieten. Diese Anforderung tritt häufig in den folgenden Szenarien auf:

1. Wenn eine Webseite angezeigt wird, möchten wir nicht, dass Benutzer den Inhalt der Webseite durch Verschieben anzeigen In einigen speziellen Anwendungsszenarien ist es erforderlich, dass Benutzern das Wischen der Seite untersagt wird.
2. Wie kann man also ein Verrutschen in HTML verhindern? In diesem Artikel werden Ihnen zwei Methoden vorgestellt.

Methode 1: CSS-Eigenschaften verwenden

In der CSS-Datei können wir die folgende Anweisung verwenden, um das Gleiten zu deaktivieren:

body{
   overflow: hidden;
}

Dieser CSS-Code verbirgt die Bildlaufleiste der Seite und erzielt so den Effekt, das Gleiten zu deaktivieren. Diese Methode eignet sich für Situationen, in denen ein Fenster mit fester Größe in der Mitte der Seite angezeigt werden muss, um den Benutzer daran zu hindern, weiter zu blättern und zu blättern.

Allerdings weist diese Methode auch einige Mängel auf. Dadurch wird nur die Bildlaufleiste ausgeblendet, der Benutzer wird jedoch nicht daran gehindert, auf der Seite zu scrollen. Wenn der Benutzer zum Schieben die Tastatur oder das Mausrad verwendet, treten weiterhin Probleme auf.

Methode 2: JavaScript-Code verwenden

Zusätzlich zur Verwendung von CSS-Eigenschaften können wir auch JavaScript-Code verwenden, um zu verhindern, dass HTML verrutscht.

var scrollTop;
function stopScroll(){
    scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.overflow='hidden';
    document.body.style.position='fixed';
    document.body.style.top=-scrollTop+'px';
}
function allowScroll(){
    document.body.style.overflow='auto';
    document.body.style.position='';
    document.body.style.top='';
    document.body.scrollTop = scrollTop;
    document.documentElement.scrollTop = scrollTop;
}

Der obige Code definiert zwei Funktionen stopScroll() undallowScroll(), die zum Stoppen bzw. Ermöglichen des Seitengleitens verwendet werden. Unter anderem wird die Funktion stopScroll () verwendet, um das Scrollen der Seite zu verhindern, und die Funktion AllowScroll () wird verwendet, um die Funktion zum Scrollen der Seite wiederherzustellen.

Diese Methode kann das Gleiten des Benutzers auf der Seite vollständig verhindern und stellt außerdem sicher, dass die Gleitposition des Benutzers wiederhergestellt wird, bevor die Seite geladen wird.

Bitte beachten Sie jedoch, dass diese Methode möglicherweise nicht für alle Anwendungsszenarien und Browser geeignet ist. Einige Browser unterstützen JavaScript möglicherweise nicht vollständig, was dazu führt, dass dieser Code nicht ordnungsgemäß funktioniert.

Fazit

Das Deaktivieren des Schiebens in HTML ist eine häufige Webdesign-Anforderung. In diesem Artikel werden zwei verschiedene Methoden erläutert: die Verwendung von CSS-Eigenschaften und JavaScript-Code. Leser können eine geeignete Methode auswählen, um das Verschieben von Seiten entsprechend den tatsächlichen Anforderungen zu verhindern. Gleichzeitig sollten sie auf die Einschränkungen der Methode und die Kompatibilität des Browsers achten.

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