React.js Fonction d'appel après l'événement de défilement

Question

J'ai construit un composant React qui est supposé appeler la fonction sur un événement de défilement de fenêtre.

Je voudrais appeler la fonction, « getCards (« default »), lorsque le rouleau utilisateur à 90% de la hauteur de défilement

Le composant semble comme le montre ci-dessous.

class Home extends React.Component { 
 

 
    constructor(props) { 
 
    super(props); 
 
    this.handleScroll = this.handleScroll.bind(this); 
 
    } 
 

 
    componentDidMount() { 
 
    // test 
 
    this.props.getCards('default'); 
 
    window.addEventListener('scroll', this.handleScroll); 
 
    } 
 

 
    handleScroll(event) { 
 
    console.log('scroll event'); 
 
    }

quelqu'un pourrait-il me aider à y parvenir?

Merci.

Answer 1

Vous devez travailler avec votre appareil, s'il vous plaît se référer à ce code:

class Home extends React.Component { 

    constructor(props) { 
    super(props); 
    } 

    componentDidMount() { 
    // test 
    this.props.getCards('default'); 
    } 

    render() { 
    return (<div onScroll={this.handleScroll}>...</div>) 
    } 

    handleScroll(event) { 
    var heightBound = window.height * 0.8 
    if (heightBound > window.scrollY) { 
     // Probably you want to load new cards? 
     this.props.getCards(...); 
    } 
    } 

L'événement de défilement doit être placé à l'intérieur de votre composant et binded à l'aide EVT OnScroll. Le gestionnaire vérifiera le pourcentage de la taille de l'écran utilisé et chargera d'autres éléments si la limite inférieure est atteinte. Je souhaite que cela peut aider :)