时间戳

首页 > 解决方案 > React - 滚动到某个目标元素时应用 CSS 类

javascript - React - 滚动到某个目标元素时应用 CSS 类

问题描述

我正在尝试在用户滚动到特定目标元素时应用 CSS 类。我在这里写了一个辅助函数：

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)
}

我的 React 组件是：

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>
     )
}

我在句柄滚动侦听器中编写了一个控制台日志，当我滚动时它不会被调用。澄清一下：我正在滚动页面的窗口，当我到达某个元素时，我希望应用一个 CSS 类。

我如何实现这种行为？

注意：我更喜欢不涉及 JQuery 或其他外部库的想法/解决方案，因为有关此问题的许多其他答案往往会这样做。

标签： javascriptreactjs

解决方案

我试图在代码沙箱中模拟你： https ://codesandbox.io/s/react-playground-forked-5tw7t?file =/index.js:0-1229

我看不出有什么问题。您可以检查控制台日志并在开发人员工具中进行检查，以查看当您在那里滚动时切换的类

推荐阅读