Je suis en difficulté avec Scrolling Parallaxe Scroll de Scroll. Lorsque la page Initial Scroll n'est pas au sommet sur la charge. Im utilise une bibliothèque de réact-Scroll-parallaxe ( https://www.npmjs.com/package / React-Scroll-Parallaxe ).
Pour résoudre mon problème, j'essaie d'utiliser leur suggestion d'ici 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;
5 Réponses :
Je pense que vous devez utiliser l'une des méthodes de cycle de vie si vous utilisez un composant basé sur la classe telle que la méthode ComponentDidMount.
componentDidMount() {
window.addEventListener('resize', this.handleResize)
}
Il est très probable que votre fenêtre ait déjà tiré l'événement charger pendant que votre composant est istéantied.
S'il s'agit de l'événement code> code> qui ne fonctionne pas, il est possible que la page soit déjà chargée lorsque ce code est en cours d'exécution. Essayez d'ajouter une instruction IF pour vérifier si le document est déjà chargé.
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;
Le crochet d'UseEffect n'est pas approprié dans cette situation, vous devez donc utiliser un crochet d'ustelayoutEffect.
S'il vous plaît vérifier cette référence.
https://www.npmjs.com/package/ React-Scroll-Parallaxe # Exemple-utilisation-de-context
Vous avez utilisé UseEffect Crochet
Mais dans cet exemple, ils ont utilisé USAYAYOUTEffect Crochet.
S'il vous plaît faire référence à cette référence.
https://kentcdodds.com/blog/useeffect-vs-uselayouteffet
Merci pour la réponse, la fonction fonctionne maintenant, mais cela ne résout toujours pas mon problème que Parallax est bloqué. Il semble que la mise à jour () ne fonctionne pas. Des idées?
if (document.readyState === "complete") {
handler();
} else {
window.addEventListener('load', handler);
return () => document.removeEventListener('load', handler);
}
This will cause intermittent issue, due to script not fully loaded.