我正在构建一个应用程序(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 } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。