反应和视差:单击页面内导航链接时错位视差图像

Question

我正在使用一个名为 Rellax 的 React 库在我的网站上实现视差效果。 当我滚动到页面的该部分时，它工作得很好。但是，当我单击导航栏并导航到特定 #section 时，这个非常视差的图像漂浮在与它应该放置的位置完全不同的距离上。

我有一种感觉，这与元素的位置是如何计算的有关，因为我的页面结构没有单一的主体，而是一组反应组件。

其他视差库也出现了同样的问题。

现在我以这种方式指视差组件： (代码是缩写的，只显示我引用效果的部分(

export default function Advantages() {
useEffect(() => {
// init parallax
new Rellax('#parallaxImage', {
center: true,
});
});
return (
<section>
<img 
id="parallaxImage" 
className="w-100" 
data-rellax-speed="2" 
src={ traktor }
alt="tractor parallax" />
</section>
)}

Answer 1

你不应该只调用一次(通过添加方括号(吗？

useEffect(() => {
// init parallax
new Rellax('#parallaxImage', {
center: true,
});
}, []); // <-- Empty array