React 和 Parallax：点击页内导航时错位的视差图像 link

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

React 和 Parallax：点击页内导航时错位的视差图像 link

React and Parallax : Misplaced parallax image when clicking on in-page navigation link

javascript

css

reactjs

parallax