ReactJs

Ce sujet est résolu
Default
,

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éponse

44803
,

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', ...)

44803
,

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 ?

Default
,

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

Default
,

Je vais essayer cela et je vous tiens au courant !

Default
,

C'était ça merci beaucoup !!