Question

当页面初始滚动不在顶部时，我一直在挣扎滚动视差。我正在使用react-scroll-parallax库（https://www.npmjs.com/package/react-scroll-parallax）。为了解决我的问题，我正在尝试从这里https://www.npmjs.com/package/react-scroll-parallax#example-usage-of-context使用他们的建议。

import { useEffect } from 'react';
import { useController } from 'react-scroll-parallax';

const ParallaxCache = () => {
  const { parallaxController } = useController();
  useEffect(() => {
    const handler = () => {
      parallaxController.update();
      console.log(1);
    };
    window.addEventListener('load', handler);
    return () => document.removeEventListener('load', handler);
  }, [parallaxController]);

  return null;
};

export default ParallaxCache;

我将ParallaxCache组件放在我的应用程序顶部（实际上是页面，导致其gatsby）。

但是'load'事件似乎不起作用。我也尝试过“ DOMContentLoaded”，但结果相同。但是，其他事件（例如“滚动”或“调整大小”）也可以正常工作，并且我的控制器也会更新。我是否缺少某些东西或做出反应阻止使用此事件？

Answer 1

很可能您的窗口在您的组件被激活时已经触发了 load 事件。

Answer 2

如果仅load事件不起作用，则可能是在运行此代码时页面已加载。尝试添加一个if语句来检查文档是否已经加载。

import { useEffect } from 'react';
import { useController } from 'react-scroll-parallax';

const ParallaxCache = () => {
  const { parallaxController } = useController();
  useEffect(() => {
    const handler = () => {
      parallaxController.update();
      console.log(1);
    };

    if (document.readyState === "complete") {
      handler();
    } else {
      window.addEventListener('load', handler);
      return () => document.removeEventListener('load', handler);
    }
  }, [parallaxController]);

  return null;
};

export default ParallaxCache;

Answer 3

在这种情况下，useEffect挂钩不合适，因此您必须使用useLayoutEffect挂钩。请检查此参考。 https://www.npmjs.com/package/react-scroll-parallax#example-usage-of-context 您使用过useEffect挂钩但是在此示例中，他们使用了useLayoutEffect钩子。请参考此参考。 https://kentcdodds.com/blog/useeffect-vs-uselayouteffect

const ParallaxCache = () => {
    const { parallaxController } = useController();

    useLayoutEffect(() => {
        const handler = () => parallaxController.update();
        window.addEventListener('load', handler);
        return () => window.removeEventListener('load', handler);
    }, [parallaxController]);

    return null;
};

Answer 4

if (document.readyState === "complete") {
  handler();
} else {
  window.addEventListener('load', handler);
  return () => document.removeEventListener('load', handler);
}

由于脚本未完全加载，这将导致间歇性问题。

Answer 5

如果您使用基于类的组件（例如componentDidMount方法），则应该使用生命周期方法之一。

componentDidMount() {
   window.addEventListener('resize', this.handleResize)
}

window.addEventListener（'load'，function）在react（gatsby）中不起作用

5 个答案: