我在React中构建了一个组件,它应该在窗口滚动上更新自己的样式以创建视差效果.
组件render
方法如下所示:
function() {
let style = { transform: 'translateY(0px)' };
window.addEventListener('scroll', (event) => {
let scrollTop = event.srcElement.body.scrollTop,
itemTranslate = Math.min(0, scrollTop/3 - 60);
style.transform = 'translateY(' + itemTranslate + 'px)');
});
return (
<div style={style}></div>
);
}
Run Code Online (Sandbox Code Playgroud)
这不起作用,因为React不知道组件已更改,因此组件不会被重新呈现.
我已经尝试将值存储在itemTranslate
组件的状态中,并调用setState
滚动回调.但是,这使得滚动无法使用,因为这非常慢.
有关如何做到这一点的任何建议?
谢谢.