代码之家 › 专栏 › 技术社区 › Darren

父组件中div id的滚动位置

reactjs javascript

Darren · 技术社区 · 6 年前

使用ReactJS和GatsbyJS(v2),我有一个 header 位于 fixed 结束 div id="outerContainer" 在父母身上 layout 组件。

在下面的滚动位置切换类 100px ,我通常会使用 window.scrollY < 100 .

但是,由于body类具有 overflow:hidden 和 outerContainer 具有 overflow: scroll ,和 window 滚动位置不变。

我如何定义 outerContainer.scrollY < 100 从子组件,同时引用 外容器 滚动位置的父对象?

布局.js

const Layout = ({ children }) => (
  <div>
    <div id="outerContainer" ref={el => (this.outerContainer = el)}>
      <div className="content">{children}</div>
    </div>
    <Header />
  </div>
);

标题.js

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      navScrolled: true
    };
    this.onScroll = this.onScroll.bind(this);
  }

  componentDidMount() {
    document.addEventListener('scroll', () => {
      const navScrolled = outerContainer.scrollY < 100;
      if (navScrolled !== this.state.navScrolled) {
        this.onScroll(navScrolled);
      }
    });
  }
  componentWillUnmount() {...}
  ...
}

我的第一个想法是我应该在 layout.js 使用 props 把这个州传下去。这是最好的选择还是有其他的方法可以让一切 header.js ?