javascript - react JS |当元素到达顶部

Question

当我的组件到达页面顶部时，我正在寻找它的 ReactJS 版本。 jQuery 方式非常简单，我希望它保持这么简单..

$(window).on('scroll', function() {
    if($(window).scrollTop() > element.offset().top) {

    }
});

Answer 1

您需要获取元素的引用并执行常规逻辑。

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

// scroll event handler
handleScroll() {
  if(this.elem && this.elem.offsetTop > document.body.scrollTop) {
    // do your stuff
  }
}

componentDidMount() {
  window.addEventListener("scroll", this.handleScroll);
}

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

render() {
  return(
    <div className='wrapper' ref={elem => {this.elem = elem}}>
      // this will bind your component's reference so you can
      // use it in your event handler
    </div>
  ); 
}

请参阅此处示例 - https://codesandbox.io/s/p0jo37147