我正在构建一个应用程序(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;
这是挂钩任何听众的一般建议：
在componentDillMount中附加内容,在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
}
}
