父组件中div id的滚动位置答案

【问题标题】：Scroll position of a div id in parent component父组件中div id的滚动位置
【发布时间】：2018-08-09 07:08:25
【问题描述】：

使用 ReactJS 和 GatsbyJS (v2) 我有一个 header 组件，它位于父 layout 组件中的 fixed 之上的 div id="outerContainer"。

要在100px下方的滚动位置上切换类，我通常会使用window.scrollY < 100。

但是，由于 overflow:hidden 和 outerContainer 和 overflow: scroll 样式的 body 类，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 中的所有内容都感兴趣？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

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

【讨论】：