How to disable scroll when reaches n% bottom?

Question

How can we disable scrolling when it reaches 80% at the bottom? I started the disable scroll functionality from the code below, but it does not work in iPhone. source

useEffect(() => {
    document.addEventListener('touchstart', function(e) {e.preventDefault()}, false);
    document.addEventListener('touchmove', function(e) {e.preventDefault()}, false);
}, []);

Is there a js/CSS way or any package that could detect the scrolling percentage? And disable it when reaches around 80% bottom (but can scroll up again)?

you can potentially do a DOM read that gets your document's entire height, calculate 80% of that value and when that gets hit disable it — Jorge Guerreiro, Sep 27 '21 at 09:23

score 0 · Answer 1 · answered Sep 27 '21 at 10:13

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.

How to disable scroll when reaches n% bottom?

1 Answers1