当我将它与 React 全屏组件一起使用时，React on screen 不起作用

Question

当我在整页 React 的幻灯片中向下滚动时，虽然屏幕视口上的页面 div 的背景颜色没有改变，但我使用 react-on-screen npm 包与整页反应组件但是当我使用没有整页反应组件的屏幕反应时它工作得很好，我想当我在整页反应幻灯片中向下滚动时视口不认为新幻灯片是新页面所以div 背景颜色不变。另外，当最后一页中的 div 在屏幕上时，我尝试调整 window 的大小，然后更改背景。你能帮我解决这个问题吗？

render() {
    const { height } = this.state;
    return (
      <Layout>
        <ReactFullpage
          refresh
          keyboardScrolling
          lazyLoading
          scrollOverflowReset={false}
          slidesNavigation={deger}
          onLeave={this.onLeave}
          render={({ state, fullpageApi }) => {
            return (
              <ReactFullpage.Wrapper>
                <React.Fragment>
                  <div className="section">
                    <p>Section 1</p>
                  </div>
                  <div className="section">
                    <div className="Index_LogoWrapper" style={{ height }}>
                      <LogoImage />
                      <div className="Index_ContactUsWrapper">
                        <div className="Index_ContactUs">
                For more information contact us at&nbsp;
                          <a href="mailto:info@mail.io">info@mail.io</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="section">
                    <TrackVisibility>
                      <ComponentToTrack />
                    </TrackVisibility>
                  </div>
                </React.Fragment>
              </ReactFullpage.Wrapper>
            );
          }}
        />
      </Layout>
    );
  }

Answer 1

如果您用来更改颜色的组件依赖于滚动位置，那么您必须在您的 react-fullpage 组件中使用 fullPage.js 的 scrollBar 选项。

否则，我会鼓励您使用 fullpage.js 回调，例如 afterLoad 或 onLeave，甚至使用添加的 fullpage.js 状态类到正文元素。

请参阅我的视频教程之一，了解如何使用 fullpage.js 状态类执行 CSS 3 个动画： https://www.youtube.com/watch?v=qiCVPpI9l3M

当我将它与 React 全屏组件一起使用时，React on screen 不起作用

React on screen doesn't work when I use it with React full-screen component

javascript

reactjs

fullpage.js