React-listen向上/向下滚动？

Question

我正在构建一个应用程序（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; 

Answer 1

这是一般建议对挂接到任何听众：

附上componentDidMount的东西，在卸装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 
    }) 
}