So deaktivieren Sie das Scrollen auf einer Webseite mit JavaScript
Deaktivieren Sie das Scrollen auf einer Webseite
Das Scrollen auf Webseiten kann mit JavaScript auf verschiedene Arten leicht deaktiviert werden. In diesem Artikel werden wir jedoch nur zwei Möglichkeiten sehen, um es zu deaktivieren, die unten aufgeführt sind:
- Methode 1: Durch Überschreiben des Fensters.ONSCROLL -Funktion
- Methode 2: Durch Einstellen der Körperhöhe auf 100% und überflutet sich auf versteckt
Jede dieser Methoden wird unten zusammen mit Beispielen für eine bessere Demonstration und Ihr Verständnis erläutert.
Durch Überschreiben des Fensters.ONSCROLL -Funktion
Das Ereignis Fenster.ONSCROLL wird abgefeuert, wenn das Fenster gescrollt wurde. Dadurch wird überschreiben und die Funktion auf einen festen Wert festgelegt wird den Bildlaufeffekt für Ihre Webseite.
Sie finden die aktuelle Scrollposition von oben durch Fenster.PageyOffset Und dokumentieren.Dokumentelement.Scrolltop, Beide werden den aktuellen Wert von zurückgeben Y Scrollen. Diese beiden werden mit dem oder dem logischen Operator „||“ zusammen verwendet als einer von ihnen könnte 0 auf einigen Browsern zurückkehren.
Nun, um den Wert von zu finden X Scroll wir können benutzen Fenster.PagexOffset und das dokumentieren.Dokumentelement.Scrollleft die ähnlich verwendet werden wie y Scrollen, Verwenden oder Bediener und geben den Wert für X Scroll der Webseite zurück.
Jetzt danach werden wir verwenden Fenster.scrollto () zusammen mit den beiden oben genannten Werten, um die Bildlaufposition Ihrer Webseite auf diesen Wert festzulegen. Sie können das Scrollen nach hinten aktivieren, indem Sie das Fenster überschreiben.ONSCROLL -Funktion, um eine leere Funktion zu leer.
Im Folgenden finden Sie den Code, der zur Deaktivierung der Scrollen der Webseite mithilfe dieser Methode bereitgestellt wird:
HTML:
Willkommen auf unserer Webseite
Klicken Sie auf die Schaltflächen unten, um das Scrollen zu aktivieren oder zu deaktivieren.
JavaScript:
functionDisable ()// um die Scrollposition der aktuellen Webseite zu erhalten
TopScroll = Fenster.PageyOffset || dokumentieren.Dokumentelement.scrolltop;
LinksScroll = Fenster.pagexOffset || dokumentieren.Dokumentelement.Scrollleft,
// Wenn Scroll stattfindet, setzen Sie es auf den vorherigen Wert
Fenster.onScroll = function ()
Fenster.scrollto (linkScroll, topscroll);
;
functionEnable ()
Fenster.onScroll = function () ;
Ausgang:
Indem Sie die Körperhöhe auf 100% setzen und sich zu versteckt haben
In dieser Methode verwenden wir CSS, um das Bildlauf auf Webseiten zu deaktivieren. In der CSS -Klasse setzen wir die Höhe auf 100% und dann die Überlaufeigenschaft auf versteckt, wodurch die Bildlaufleiste der Webseite deaktiviert wird.
Die Methode dokumentieren.Körper.Klasse.add ("className") wird verwendet, um den Klassennamen dem Körperelement hinzuzufügen und damit die Scrollen zu deaktivieren. Um das Scrollen zurück zu aktivieren, wird die Klasse mithilfe der Methode entfernt dokumentieren.Körper.Klasse.entfernen ("Klassenname").
HTML:
Willkommen auf unserer Webseite
Klicken Sie auf die Schaltflächen unten, um das Scrollen zu aktivieren oder zu deaktivieren.
JavaScript:
Ausgang:
Abschluss
JavaScript wird für verschiedene Zwecke verwendet, z. Durch JavaScript können wir auch die Aktion verschiedener Komponenten auf unserer Webseite aktivieren und deaktivieren. In diesem Artikel haben wir erläutert, wie das Scrollen auf einer Webseite mit JavaScript deaktiviert und zwei verschiedene Methoden zusammen mit Beispielen und Code diskutiert werden, um ein besseres Verständnis von Ihnen zu verstehen. Beide Methoden können leicht verwendet werden und können Benutzern helfen, die Bildlaufleiste einfach zu deaktivieren.