Website-Suche

angular - Scroll-Ereignis nach Funktion in TypeScript stoppen

Ist es möglich, nach einer Funktion ein weiteres Scrollereignis zu verhindern.

Ich möchte einen Effekt erzeugen, bei dem man auf einer Website nach unten scrollen kann, und wenn man am unteren Ende dieser Website ist, kann man weiter scrollen, aber dann erscheint eine neue Seite von links - so als würde man nach links scrollen. Diese neue Seite erscheint mit einer Animation, daher möchte ich sie nicht direkt auslösen, wenn das Ende der Seite erreicht ist.

Ich stelle eine Zeitüberschreitung ein, sobald du den Boden erreichst:

this.timeoutUnitBottom = setTimeout(() => this.unitBottom = true, 1000);

Und die Animation wird nur ausgelöst, wenn this.unitBottom==true ist. Also scrollst du nach unten und dann kannst du nach 1 Sekunde wieder scrollen und die nächste Seite wird von links erscheinen.

Mein Problem: Wenn du wie ich auf einem Mac scrollst, wird dein Scroll-Ereignis weitergehen, selbst wenn du das Touchpad nicht berührst. Normalerweise erzeugt dies auf normalen Seiten ein sanftes Scrollen, aber hier könnte es passieren, dass du nach unten scrollst, das setTimeout ausgelöst wird und dein Scroll-Ereignis danach immer noch ausgelöst wird.

Also: Ist es möglich, das laufende Scroll-Ereignis auf einem Mac zu stoppen, nachdem man die Finger gehoben hat (oder sogar auf anderen Computern, ich kenne diese Mechanik nicht)

Dies könnte ein unlösbares Problem sein, da man normalerweise die Eingabe des Computers nicht ändern kann, aber vielleicht hätte der eine oder andere von euch eine Idee.

Mit freundlichen Grüßen, Sam

BEARBEITEN

Ich denke, dass alle Leute, die meine Frage beantwortet haben, den Punkt nicht verstanden haben, dass ich das Scroll-Event wirklich brauche und es nicht einfach deaktivieren kann. Das Einzige, was geholfen hat, war der Kommentar unter meiner Frage.

Antwort #1

Sie können das Scroll-Ereignis mithilfe von addEventListener überwachen. In dieser Funktion können Sie die window.scrollY-Position beobachten. Sobald Sie eine bestimmte Y-Position erreichen, können Sie die Bildlaufleiste vorübergehend deaktivieren, indem Sie overflow: hidden; auf das Dokument (oder Ihr Container-Element) anwenden.

Beispiel :

window.addEventListener('scroll', function(e) {
  if (window.scrollY >= 200) {
    document.documentElement.style.overflow = 'hidden';
  }
});

Antwort #2

Sie können Scroll-Ereignisse nicht deaktivieren. Sie können jedoch die Aktionen deaktivieren, die das Scrollen verursachen. Meiner Meinung nach würde ich anstelle der Verwendung mehrerer Event-Listener, wie hier erwähnt, die folgende Lösung vorschlagen: wo der Benutzer scrollt, Sie aber das Ereignis manipulieren, um an derselben Position zu bleiben, und wenn Sie das Scrollen wieder aktivieren möchten, überschreiben Sie window.onscroll mit einer leeren Funktion.

disableScroll() { 
    // Get the current page scroll position 
    scrollTop = window.pageYOffset || document.documentElement.scrollTop; 
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, 
  
        // if any scroll is attempted, set this to the previous value 
        window.onscroll = function() { 
            window.scrollTo(scrollLeft, scrollTop); 
        }; 
} 
  
enableScroll() { 
    window.onscroll = function() {}; 
}

Verwandte Artikel