反应 - 滚动到某个目标元素时应用 CSS class

Question

I am trying to apply a CSS class upon a user scrolling to a particular target element. I've written a helper function here:

export function isTriggerElementInViewport(elementId) {
    const element = document.getElementById(elementId)
    const rect = element.getBoundingClientRect()

    const viewportWidth = window.innerWidth || document.documentElement.clientWidth
    const viewportHeight = window.innerHeight || document.documentElement.clientHeight

    return (rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= viewportHeight &&
        rect.right <= viewportWidth)
}

And my React component is:

const MyComponent = () => {  
    const [elementVisible, setElementVisible] = useState(false)

    const _handleScroll = elementId => {
        console.log('Scrolling')
        setElementVisible(isTriggerElementInViewport(elementId))
    }

    useEffect(() => {
        window.addEventListener('scroll', () => _handleScroll('targetElementId'))
    }, [])

    return (
        <div className={elementVisible ? 'special-class' : ''} id="targetElementId">
            When this is visible, apply the special CSS class.
        </div>
     )
}

I've written a console log in the handle scroll listener and it does not get called when I scroll. To clarify: I am scrolling the window of the page and when I get to a certain element, I want a CSS class to be applied.

How do I achieve this behavior?

Note: I would prefer ideas/solutions that does not involve JQuery or other external libraries as many of the other answers about this tends to do.

Answer 1

I tried to simluate you in codesandbox: https://codesandbox.io/s/react-playground-forked-5tw7t?file=/index.js:0-1229

I don't see any problem with it. You can check the console log and inspect at developer tool to see the class is toggled when you scrolled there