Question

当我在整页react的幻灯片中向下滚动时，尽管屏幕视口上的页面的div的背景色没有变化，但我将react-on-screen npm包与整页react组件一起使用，但是当我使用不带整页反应的屏幕上反应组件，效果很好，我认为当我在整页反应幻灯片中向下滚动时，视口不会认为新幻灯片是新页面，因此div背景色不会更改。另外，当最后一页中的div在屏幕上时，我尝试调整窗口大小，然后更改了背景。您能帮我解决这个问题吗？

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。

否则，我鼓励您使用诸如afterLoad或onLeave之类的fullpage.js回调，甚至使用添加到body元素中的fullpage.js状态类。

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

当我将它与React全屏组件一起使用时，屏幕上的React无法正常工作

1 个答案: