Stop scrolling Event after function typescript

Question

Is it possible to prevent any further scrolling event after a function.

I would like to generate an effect, where you can scroll down a site, and if you are at the bottom of this site, you can scroll further but then a new site will appear from the left - as you would scroll to the left. this new page appears with an animation, so i don't want to trigger it directly if the bottom of the page is reached.

I am setting a timeout, as far as you reach the bottom:

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

and the animation will only trigger, if this.unitBottom==true. So you scroll to the bottom and then after 1 second you can scroll again and the next site will appear from the left.

My Problem: If you're scrolling as me on a mac, your scroll event will go on even if you don't touch the touchpad. This generates normally a smooth scroll on casual pages, but here it could be that you scroll to the bottom, the setTimeout triggers and your scroll event still triggers after that second.

So: Is it possible to stop the ongoing scroll event on a mac after you lift up your fingers (or even on any other computers, i don't know those mechanics)

This may be an unsolvable problem, because normally you can't change the computers input, but maybe some of you would have some idea.

Sincerly, Sam

EDIT

I think all of the people, who answered my question didn't get the point, that i do need the scrollevent and can't simply disable it. The only thing that helped was the comment unter my question.

Answer 1

You can listen to the scroll event by using addEventListener. In this function you can monitor the window.scrollY position. Once you reach a certain Y position you can temporarily disable the scrollbar by adding overflow: hidden; to the document (or your container element).

Example:

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