Question

我希望我的文字在其上方100px处出现一次，我希望在此之前将其隐藏。我希望它从该左侧的100px标记处滑入。在这对我来说还不是新鲜事物之前，我从未做过这样的事情。我该如何在React中做到这一点？我用Google搜索了无数的答案，但似乎没有一个真正的帮助。

我尝试使用this.test和this.test()都不起作用。

import React, {Component} from 'react';

class SlideIn extends Component{

    test=(e)=>{
        console.log(e)
    }

    componentDidMount(){
        window.addEventListener('scroll', this.test())

    }


    render(){
        const intro = document.querySelector('.intro')
        return(
            <div>
                <p>text to be shown at 100px</p>
            </div>
        )
    }
}

export default SlideIn

它不记录任何事件。如果我console.log('hi')会登录一次，但是在滚动时不再登录？我正在使用测试方法，只是为了验证它是否有效。

任何帮助，或视频/教程，一切都感谢！

Answer 1

scroll不是检测元素是否在浏览器视口中显示的适当事件。

要检测元素何时进入视图框，可以使用大多数现代浏览器中可用的Intersection Observer API。它有一个React实现：react-intersection-observer https://www.npmjs.com/package/react-intersection-observer

如何使文本出现在滚动React

1 个答案: