react how to execute a function when user scroll past some mark

Question

How to execute a function when user scroll past some some mark. say 100px above the page bottom

This is what I got

const onScroll = (e) => {
    let scrollHeight, totalHeight
    scrollHeight = document.body.scrollHeight
    totalHeight = window.scrollY + window.innerHeight
    if (totalHeight >= scrollHeight) {
        // do stuff
    }
}
const DetectScrollBottom = () => {
    useEffect(() => {
        window.addEventListener('scroll', onScroll, false)
        return () => window.removeEventListener('scroll', onScroll, false)
    }, [])
    return <div></div>
}

Problem is, this executes function A at when scroll reaches bottom. not 100px above bottom.

score 0 · Answer 1 · edited Oct 02 '19 at 18:29

0

if (totalHeight === scrollHeight-100) {
  // Your code here
}

When scroll reaches 100px above the bottom your code will trigger. You can also check here for some reference about scrollHeight.

There is also a related question about it on SO and it is worth to take a look at it here.

edited Oct 02 '19 at 18:29

Aras

1,599
15
25

answered Oct 02 '19 at 18:16

Luiz Mariz

58
5

Try `if (totalHeight >= scrollHeight-100) ` – Yuan-Hao Chiang Oct 02 '19 at 20:12
then the script will execute multiple time when I reach the bottom. each scroll px will trigger the function a – angry kiwi Oct 02 '19 at 20:15

score 0 · Answer 2 · answered Oct 03 '19 at 10:57

const DetectScrollBottom = () => {
    useEffect(() => {
        window.addEventListener('scroll', onScroll, false)
        return () => window.removeEventListener('scroll', onScroll, false)
    }, [])
    let base
    const onScroll = (e) => {
        let scrollHeight, totalHeight
        scrollHeight = document.body.scrollHeight
        totalHeight = window.scrollY + window.innerHeight

        if (totalHeight <= scrollHeight - 401) {
            base = false
        }
        if (totalHeight >= scrollHeight - 400) {
            if (base == true) return
            // run function A here
            base = true
        }
    }
    return <div></div>
}

react how to execute a function when user scroll past some mark

2 Answers2