Javascript 如何使文本显示在滚动条上

我希望我的文字出现一次im 100px以上，我希望它被隐藏之前。我想让它在100像素处从左边滑进去。我以前从未做过这样的事，这对我来说是新鲜事。我怎样才能在反应中做到这一点？我在谷歌上搜索了无数的答案，但似乎没有一个能真正帮助我

我尝试使用

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

import React，{Component}来自'React'；
类SlideIn扩展组件{
测试=（e）=>{
控制台日志（e）
}
componentDidMount（）{
window.addEventListener（'scroll'，this.test（））
}
render（）{
const intro=document.querySelector（“.intro”）
返回(
文本以100px显示

)
}
}
导出默认幻灯片

它不会记录任何事件。如果我

console.log（'hi'）

它将记录hi一次，但在我滚动时不再记录？ 我正在使用测试方法，只是为了验证它是否有效

---

任何帮助，或视频/教程，都将不胜感激

滚动

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

---

要检测元素何时进入视图框，可以使用在大多数现代浏览器上可用的

Intersection Observer

API。它有一个React实现：

React intersection observer

为滚动事件处理程序分配一个函数，如下所示：

window.addEventListener（'scroll'，this.test）

。使用测试功能删除

（）

。