Question

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

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

    }
});

Answer 1

const ScrollToTop = () => {
 window.scrollTo(0, 0)
 return null
}

Answer 2

您需要获取元素的参考并按照惯常做法。

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

Answer 3

要遵循的步骤： 1.通过以下方式将onScroll事件监听器挂钩： window.addEventListener("scroll", this.onHandleScrollEvent); this.onHandleScrollEvent将是您的处理函数，它类似于$(window).on('scroll',()=>{})回调函数。

注意：如果您的项目中包含jquery，则可以直接使用componentDidMount中的代码：

class MyComponent extends Component{ onScrollFunction = function() { if($(window).scrollTop() > element.offset().top) { // do not do DOM manipulation using Jquery here. } } componentDidMount(){ $(window).on('scroll',this.onScrollFunction); } render(){ return(null) } }

有关详细实施，请参阅Reactjs: How can access property of scrollbox (horizontal offset)。

ReactJS |当元素到达顶部时

3 个答案: