Javascript 平滑反应组件中的视差

我有一个带有简单视差的React组件，它可以更改top和opacity值。问题是滚动动画有点不稳定。我有没有办法让过渡平稳下来？我在vanilla JS中使用了

requestAnimationFrame（）

，但我认为我不能在React组件中使用它，因为渲染周期不同

此外，元素离开视口后，如何停止更改状态

以下是我的实现：

const Parallax=React.createClass({
getInitialState:函数（）{
返回{
排名：0，
不透明度：1
};
},
视差：功能（事件）{
const scrollTop=window.pageYOffset；
常量元素高度=this.splash.clientHeight；
this.setState（{top:scrollTop*.7+'px'}）；
this.setState（{opacity:（elementHeight-scrollTop）/elementHeight}）；
},
componentDidMount:function（）{
window.addEventListener（'scroll'，this.parallax）；
},
componentWillUnmount:function（）{
window.removeEventListener（'scroll'，this.parallax）；
},
render:function（）{
常量样式={
transform:'translateY（'+this.state.top+'），
不透明度：this.state.opacity
};
返回(
{this.splash=domElement；}}>
长内容

);
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);
.splash{
位置：相对位置；
宽度：100vw；
最大宽度：100%；
高度：100vh；
最小高度：500px；
背景：url(https://facebook.github.io/react/img/logo_og.png)无重复10%60%；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.splash___包装{
位置：绝对位置；
颜色：#fff；
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
过渡：0s变换；
}
用户滚动页面会触发许多滚动事件。
您不希望对每个滚动事件做出反应，而是将它们分组，例如每1000毫秒一次

这叫做油门。有一个很好的节流方法，但也存在其他方法

包含lodash库后，eventlistener将如下所示

window.addEventListener('scroll', _.throttle(this.parallax, 1000));

您是否使用react的生产构建测试了您的实现？我制作了一把小提琴，它似乎运行平稳：。也不要使用
getElementsByClassName（）
。相反，您应该引用您的DOM元素。@trixn谢谢您的ref提示。我已经更新了我的示例。react-scroll-parallax有一个与您类似的问题，因此我将尝试这些。感谢您的建议，但这对我不起作用-即使时间间隔为10毫秒。