Javascript 视差在屏幕上滚动

我在React中无法实现背景图像中的视差滚动，如有任何帮助，将不胜感激

我得到的错误是：

TypeError:无法读取null的属性“style”

函数英雄（）{
常量视差=document.getElementById（'home'）；
addEventListener（'scroll'，function（）{
让偏移量=window.pageYOffset；
视差.style.backgroundPositionY=偏移量*.12+'px'；
})
返回(
汉堡店
)
}
导出默认英雄

.hero容器{
高度：100vh；
背景图片：url（'burger2.jpg'）；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
背景附件：固定；
}

运行

getElementById

时，元素尚未装入

您需要使用

ref

（with），并且在元素卸载后还需要删除事件侦听器。你需要这个

函数英雄（）{
常数视差=React.useRef（null）；
React.useffect（（）=>{
函数scrollHandler（）{
常量元素=视差电流；
if（元素）{
让偏移量=window.pageYOffset；
element.style.backgroundPositionY=偏移量*.12+‘px’；
}
}
window.addEventListener（'scroll'，scrollHandler）
//返回函数以删除处理程序
//英雄卸载后将运行哪一个
return（）=>window.removeEventListener（'scroll'，scrollHandler）；
}, []);
返回(
汉堡店
)
}
导出默认英雄

尝试选择元素时，该元素尚不存在。看，你也可以用纯css来做这件事。此不需要特定于框架的代码：<代码>背景附件：固定；背景尺寸：封面做这个把戏。因此，在您的情况下，通过javascript设置

backgroundPositionY

是不必要的。@Pieterjan这与代码中的效果不同。OP希望图像向相反方向移动。