React-listen для прокрутки вверх/вниз?

Question

Я создаю приложение (ES6), и мне любопытно, что такое «правильный» способ уловить прокрутку вверх/вниз событий?

Я попробовал (npm) установку response-scroll-listener, но я не мог заставить его работать с моим классом ES6.

В основном я хочу: если прокручивать вверх, сделайте это; если прокрутите вниз, сделайте что-нибудь еще.

import React from 'react'; 
import config from '../config'; 
import StaticImageList from '../Common/StaticImageList'; 
import ScrollListener from 'react-scroll-listener'; 

class Album extends React.Component { 
    constructor(props){ 
     super(props); 

    } 
    myScrollStartHandler(){ 
     console.log('Scroll start'); 

    } 
    myScrollEndHandler(){ 
     console.log('Scroll end 300ms(default)'); 
    } 
    componentDidMount(){ 
     scrollListener.addScrollHandler('body', myScrollStartHandler, myScrollEndHandler); 
    } 
    render(){ 
     return <StaticImageList />; 
    } 
}; 

export default Album; 

Answer 1

Это общий совет для подключения в любых слушателей:

Закрепить материал в componentDidMount, Unattach в componentWillUnmount

class Whatever extends Component { 
    componentDidMount() { 
    window.addEventListener('scroll', this.handleScroll) 
    } 

    componentWillUnmount() { 
    window.removeEventListener('scroll', this.handleScroll) 
    } 

    handleScroll(event) { 
    // do something like call `this.setState` 
    // access window.scrollY etc 
    }) 
}