React 监听浏览器窗口大小改变、监听浏览器滚动条滚动

1,832 阅读1分钟
componentDidMount() {
    window.addEventListener('scroll', this.handleScroll.bind(this)) //监听滚动
    window.addEventListener('resize', this.handleResize.bind(this)) //监听窗口大小改变
  }

  componentWillUnmount() { //一定要最后移除监听器,以防多个组件之间导致this的指向紊乱
    window.removeEventListener('scroll', this.handleScroll.bind(this)) 
    window.removeEventListener('resize', this.handleResize.bind(this))
  }

  handleScroll = e => {
    console.log(
      '浏览器滚动事件',
      e.srcElement.scrollingElement.scrollTop,
      e.srcElement.scrollingElement.scrollHeight
    )
    //e.srcElement.scrollingElement.scrollTop为距离滚动条顶部高度
    // e.srcElement.scrollingElement.scrollHeight为整个文档高度
  }

  handleResize = e => {
    console.log('浏览器窗口大小改变事件', e.target.innerWidth)
  }

原文链接:blog.csdn.net/lionztt/art…