React.js Call function after scroll event

折月煮酒 提交于 2019-12-24 00:43:46

问题


I have built a React component which is suppose to call the function on window scroll event.

I would like to call the function, "getCards('default'), when the user scroll to 90% of the scroll height.

The component looks as shown in below:

class Home extends React.Component {

  constructor(props) {
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
  }

  componentDidMount() {
    // test
    this.props.getCards('default');
    window.addEventListener('scroll', this.handleScroll);
  }

  handleScroll(event) {
    console.log('scroll event');
  }

Could anyone help me achieve this?

Thank you.


回答1:


You have to work with your component, please refer to this code:

class Home extends React.Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    // test
    this.props.getCards('default');
  }

  render() {
    return (<div onScroll={this.handleScroll}>...</div>)
  }

  handleScroll(event) {
    var heightBound = window.height * 0.8
    if (heightBound > window.scrollY) {
        // Probably you want to load new cards?
        this.props.getCards(...);
    } 
  }

The scroll event must be placed inside your component and binded using onScroll evt. The handler will check for percentage of used screen size and will load others elements if the lower bound limit is reached.

I hope this can help :)




回答2:


I've got a similar problem and nothing with onScroll work to me.

constructor(props) {
  super(props);
  window.addEventListener('scroll', this.handleScroll, true);
}

handleScroll = (event) =>  { 
  // Your code
}

https://gist.github.com/koistya/934a4e452b61017ad611



来源:https://stackoverflow.com/questions/46158964/react-js-call-function-after-scroll-event

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!