React-слушайте прокрутку вверх / вниз?

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

Я попытался (npm) установить react-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;
6
reactjs scroll

1 ответов

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

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

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

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

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