Javascript 在Reactjs中滚动时隐藏元素？

我有一个为该div启用了滚动的div。我在其中有一些元素，当用户开始滚动时，我希望一个元素消失，当滚动停止时，我希望它再次显示

我该怎么做

<div className="container"/> 
    <div>Hide me on scrolling</div>
    <div>Always show </div>
</div>

.container{
    flex: 1 1 80%;
    display: flex;
    flex-wrap: wrap;
    width: calc(100vw - 110px);
    height: calc(100vh - 75px);
    overflow-y: auto;
    min-width: 500px;
    display: flex;
    justify-content: center;
    z-index: 1;
}

滚动时隐藏我
总是显示
.集装箱{
弹性：180%；
显示器：flex；
柔性包装：包装；
宽度：计算（100vw-110px）；
高度：计算（100vh-75px）；
溢出y：自动；
最小宽度：500px；
显示器：flex；
证明内容：中心；
z指数：1；
}

浏览器中没有真正的滚动状态；滚动事件发生，然后完成

当滚动事件发生时，您可以将一个名为

isScrolling

的状态设置为

true

，然后设置超时以在上次滚动后将其设置回

false

示例

类应用程序扩展了React.Component{
超时=空；
状态={
伊斯克林：错
};
componentDidMount（）{
window.addEventListener（“滚动”，this.onScroll）；
}
组件将卸载（）{
removeEventListener（“滚动”，this.onScroll）；
}
onScroll=（）=>{
this.setState（{isScrolling:true}）；
clearTimeout（this.timeout）；
this.timeout=setTimeout（（）=>{
this.setState（{isScrolling:false}）；
}, 200);
};
render（）{
返回(
{this.state.iscrolling？“隐藏”：“显示”}
);
}
}
render（，document.getElementById（“根”））

是的，我刚刚找到了这段代码，因为滚动将在最外层的容器上，一旦我做了这样的滚动，容器中的所有内容都将重新渲染，看起来很奇怪。我认为这是一种情况，我需要在渲染之外进行操作，通过dom将组件隐藏在scroll上。@chobo2好的。那么你的意思是当窗口滚动时，应该隐藏一些东西？当div滚动条滚动时（不确定这是否与窗口滚动不同）。那么应该隐藏那个div中的某些内容。我有一个固定的垂直导航和头球。在导航的右边是所有内容的呈现位置，这个div上有一个滚动条。我想我已经让你的例子运行起来了。我必须对我的div做一个ref。然而，当我改变“isScrolling”状态时，这个diff中的所有东西都有一个重新渲染（可能我做错了什么）。我所做的是删除您的状态检查并执行“document.getElementById（'testa'）.style.display=“none”