javascript - 父组件中 div id 的滚动位置

Question

使用 ReactJS 和 GatsbyJS (v2) 我有一个 header位于 fixed 的组件超过div id="outerContainer"在父级 layout组件。

在 100px 下面的滚动位置上切换类，我一般会使用window.scrollY < 100 .

但是，由于主体类的样式为 overflow:hidden和outerContainer与 overflow: scroll ，window滚动位置不变。

如何定义outerContainer.scrollY < 100来自子组件，同时引用 outerContainer父级的滚动位置？

Layout.js

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

Header.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 中的一切？

Answer 1

您的第一个想法是正确的，父类是您的 onScroll 回调的正确位置，因为滚动位置是整个布局的属性，而不是仅使用它的标题的属性。

此外，通过将 onScroll 保留在父类中，如果它在开发过程中成长为单独的类(这很可能会发生)，您也可以将其传递给outerContainer。