ReactJs

Par gabday, il y a 6 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

J'essaye de faire en sorte que lors du scroll, ma state "className" passe de "box" à "green", mais je sens que je ne suis pas loin mais je ne vois pas où est le soucis.
Je cherche a faire en sorte que lorsque le component passe sur l'écran, ce dernier change de classe.

import React from 'react' import './onScroll.css'; class Scroll extends React.Component { constructor(props) { super(props); this.state = {className: "box"} }; handleScroll(e) { let element = e.target; if (element.scrollHeight - element.scrollTop === element.clientHeight) { this.setState({className :"green"}) } } render() { return ( <div className={this.state.className} onScroll={this.handleScroll}></div> ); } } export default Scroll .box { width: 100%; height: 100vh; background-color: gray; cursor: pointer; transition: 1s; opacity :0; } .green { opacity:1; transition: 1s; }

Et en fait, ma box reste en opacity: 0, elle ne change donc pas de classe, mais je ne comprend pas pourquoi.

Si quelqu'un pourrait m'aider?

Merci!

5 réponses

Pandazaur, il y a 6 ans

Salut,

Est-ce que tu es sûr que ta méthode handleScroll(e) est bien appelée ? Tu as fait mit un console.log()pour t'assurer que l'appel fonctionne ?

gabday, il y a 6 ans

Non elle ne l'est pas justement, et lorsque j'appelle un console.log() avant le "if" cela ne fonctionne pas :/

Pandazaur, il y a 6 ans

En fait c'est pas ta div que tu scrolles, mais ton document, c'est surement sur document qu'il faut ajouter un .addEventListener('scroll', ...)

gabday, il y a 6 ans

Je vais essayer cela et je vous tiens au courant !

gabday, il y a 6 ans

C'était ça merci beaucoup !!