J'essaie de créer une chronologie chargée dynamiquement lors du défilement. Pour cette raison, j'ai besoin de l'événement scroll, combiné avec React.

window.addEventListener("scroll", console.log('scroll'), true);

Cela devrait consigner un défilement à chaque fois que je défile, mais il suffit de l'enregistrer une fois, puis rien

ÉDITER:

Si je l'utilise maintenant dans ma vraie application, avec ce code:

callbackFunc = () => {
        for (var i = 0; i < items.length; i++) {
            if (this.isElementInViewport(items[i])) {
                items[i].classList.add("in-view");
            }
        }
    }

componentDidMount() {
        window.addEventListener("load", function (event) { this.callbackFunc(); }, true);
        window.addEventListener("resize", function (event) { this.callbackFunc(); }, true);
        window.addEventListener("scroll", function (event) { this.callbackFunc(); }, true)
    }

Il dit que callbackFunc n'est pas une fonction

1
Tristan Vermeesch 27 janv. 2019 à 15:33

3 réponses

Meilleure réponse

Cela ne fonctionne pas car le écouteur d'événements attend une fonction comme deuxième argument (ou un objet implémentant l'interface EventListner) qu'elle appellera lorsque le "défilement" se produira. console.log est une fonction, mais console.log("scroll") n'est pas une fonction, c'est une fonction appelée. Et donc la valeur que vous mettez techniquement comme deuxième argument est undefined (car console.log("scroll") renvoie undefined).

const a = console.log("scroll");
console.log(a); // undefined (the value of your second arugment)

Donc, vous devez encapsuler le console.log() dans une fonction, donc la fonction est appelée, qui appellera ensuite votre méthode console.log(). Vous pouvez y parvenir en utilisant une fonction de flèche ES6:

window.addEventListener("scroll", _ => console.log('scroll'), true);
window.addEventListener("scroll", _ => console.log('scroll'), true);
body {
  height: 200vh;
}

Selon votre modification, la fonction flèche devrait résoudre votre problème. Actuellement, la fenêtre appelle votre fonction d'écouteur d'événements, donc this fait référence à window, pas au contexte de votre application. L'utilisation d'une fonction flèche devrait résoudre ce problème (car une fonction flèche n'a pas sa propre this).

1
Nick Parsons 27 janv. 2019 à 13:09

Essayez de l'ajouter dans reactjs

 componentDidMount() lifecycle function
0
elraphty 27 janv. 2019 à 12:39

Essaye ça:

window.addEventListener("scroll", function(event) { console.log('scroll'); }, true);
1
vedsmith92 27 janv. 2019 à 12:36