react绑定滑动点击事件

一 :绑定规则:一定是要滑动的元素,否则无法触发回调scroll方法;

  let { hideHeader, scrollBox } = this.refs;
    let self = this;
    let t = ReactDom.findDOMNode(hideHeader);
    $("#one")[0].addEventListener("scroll", function () {
      console.log(hideHeader.getBoundingClientRect().bottom);

    })
   $(scrollBox.layer).children('div').on('scroll', e => {
      if (hideHeader.getBoundingClientRect().bottom >= 50) {
        if (!self.state.disPlayHeader) {//如果直接使用displayheader会不刷新方法(属于局部变量)
          self.setState({ disPlayHeader: true })
        }
      } else {
        if (self.state.disPlayHeader) {
          self.setState({ disPlayHeader: false })
        }
      }
    })

可以通过jquery查找;或者refs查找(refs一定是真实的DOM元素div)否则无法使用ref

你可能感兴趣的:(前端)