当页面大于 100vh 时如何使用 React Page Scroller答案

【问题标题】：how to use React Page Scroller when you have a page larger than 100vh当页面大于 100vh 时如何使用 React Page Scroller
【发布时间】：2021-06-27 04:03:16
【问题描述】：

我在使用 React Page Scroller 时遇到问题。我使用的大多数组件都设计为占用 100vh，并且可以与 React Page Scroller 配合使用。问题来自页脚，因为它大于 100vh。我尝试将页脚留在 ReactPageScroller 组件之外，但它在屏幕上给了我 2 个垂直滚动。这意味着它会向下滚动到下一个组件，但也会向下滚动到页脚。

<ReactPageScroller>
  <SomeComponent />
  <SomeComponent />
  <SomeComponent />
  <SomeComponent />
  <Footer />
</ReactPageScroller>

或

<ReactPageScroller>
  <SomeComponent />
  <SomeComponent />
  <SomeComponent />
  <SomeComponent />
</ReactPageScroller>
 <Footer />

有什么想法吗？理想的情况是，如果我到达最后一个组件，我可以正常向下滚动到页脚，然后如果我想返回，我应该再次获得 React Page Scroller 效果。如果还不清楚我的意思，请提问

【问题讨论】：

您好，欢迎来到 SO！只有一个问题，您需要始终显示页脚还是需要向下滚动才能找到它？
你好 :) 我需要向下滚动才能找到它。

标签： css reactjs

【解决方案1】：

经过一些研究，我发现了一个带有滚动条的东西 pageOnChangeprops:
我只找到了使用 React 类组件的实现示例，所以我假设您的组件是类类型。
首先，我创建了一个状态对象，例如：

 this.state = {
      currentPage: 1,
      isFooterVisble: false
    };

并制作了一个函数，将在更改事件时设置页面上的状态：

 pageOnChange = (number) => {
    this.setState({
      currentPage: number,
      isFooterVisble: number === 6 // 6 equals to the last component number 
    });
  };

并将此函数添加到 pageOnChange={this.pageOnChange} 的ReactPageScroller：

  <ReactPageScroller
          ref={(c) => (this._pageScroller = c)}
          pageOnChange={this.pageOnChange}
        >

为了渲染页脚组件，我使用this.state.isFooterVisble 的条件渲染，如下所示：

  <>
        <ReactPageScroller
          ref={(c) => (this._pageScroller = c)}
          pageOnChange={this.pageOnChange}
        >
          <Comp title={"PAGE 1"} />
          <Comp title={"PAGE 2"} />
          <Comp title={"PAGE 3"} />
          <Comp title={"PAGE 4"} />
          <Comp title={"PAGE 5"} />
          <Comp title={"PAGE 6"} />
        </ReactPageScroller>
        {this.state.isFooterVisble && <Footer />}
      </>

并在全局 css 文件中添加：

html {
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

这里是完整的组件代码：

import React from "react";
import ReactPageScroller from "react-page-scroller";
import Comp from "./component";
import Footer from "./footer";

export default class Scroller extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 1,
      isFooterVisble: false
    };
    this._pageScroller = null;
  }

  goToPage = (eventKey) => {
    this._pageScroller.goToPage(eventKey);
  };

  pageOnChange = (number) => {
    this.setState({
      currentPage: number,
      isFooterVisble: number === 6
    });
  };

  render() {
    return (
      <>
        <ReactPageScroller
          ref={(c) => (this._pageScroller = c)}
          pageOnChange={this.pageOnChange}
        >
          <Comp title={"PAGE 1"} />
          <Comp title={"PAGE 2"} />
          <Comp title={"PAGE 3"} />
          <Comp title={"PAGE 4"} />
          <Comp title={"PAGE 5"} />
          <Comp title={"PAGE 6"} />
        </ReactPageScroller>
        {this.state.isFooterVisble && <Footer />}
      </>
    );
  }
}

【讨论】：