score:0

window.scrolly will give you the amount of your page scroll, you can get these values and then do some calculation on them to reach your expectation.

you can implement them in another useeffect hook to control your scroll amount and then trigger a listener or remove them on reaching it:

useeffect(() => {
  if(window.scrolly > document.body.offsetheight) {
    // now you can remove your listener
  }
}, [])

note 1: document.body.offsetheight is your whole page size that the user sees without any scroll.

note 2: that you can do simple calculations with these parameters to reach your desire behavior.

note 3: in this pseudo code, useeffect will be triggered after every page size change and every scroll, because of its array of dependencies. to prevent or enhance this you can create a variable for your window's actual size and then pass it to use useeffect dependencies array to trigger it by your desire.


Related Query

More Query from same tag