反应无限滚动-双滚动条显示-我只想要窗口滚动条

Question

我正在尝试为 React.js 实现无限滚动。一切正常，除了我希望能够使用窗口滚动条来激活无限滚动。目前的代码，有 2 个滚动条（我只想要一个）。

代码来自stackoverflow 在这里回答，我阅读了他的完整答案，我尝试将高度设置为100％，但它使无限滚动不起作用。 ：Stackoverflow- answered by Aniket Jha, ( the longest answer with 4 upvotes)

• 当我以这种方式渲染时会发生双滚动：

  <div>
  <First />
   <div ref="iScroll" style={{ height: "100vh", overflow: "auto"}}>
      <ul>
        {this.displayItems()}
      </ul>
      {this.state.loadingState ? <p className="loading"> loading More 
       Items..</p> : ""}
    </div>
  </div>
  

I have a Link to Codepen if this helps

class Layout extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
      items: 30,
      loadingState: false
    };
  }

  componentDidMount() {
    this.refs.iScroll.addEventListener("scroll", () => {
      if (this.refs.iScroll.scrollTop + this.refs.iScroll.clientHeight >= this.refs.iScroll.scrollHeight - 20){
        this.loadMoreItems();
      }
    });
  }

  displayItems() {
    var items = [];
    for (var i = 0; i < this.state.items; i++) {
      items.push(<li key={i}>Item {i}</li>);
    }
    return items;
  }

  loadMoreItems() {
     if(this.state.loadingState){
         return;
     }
    this.setState({ loadingState: true });
    setTimeout(() => {
      this.setState({ items: this.state.items + 10, loadingState: false });
    }, 1000);
  }

  render() {
    return (<div>

        <First />
          <div ref="iScroll" style={{ height: "100vh", overflow: "auto"}}>
            <ul>
              {this.displayItems()}
            </ul>
            {this.state.loadingState ? <p className="loading"> loading More Items..</p> : ""}
          </div>
        </div>
    );
  }
}

class First extends React.Component {
  constructor(props) {
   super(props);
   this.state = {

    };
  }

  render() {
    return (
      <h1>Testing</h1>

    )
  }
}

ReactDOM.render(<Layout />, document.getElementById('example'));

Answer 1

如果您不希望出现第二个滚动条，则需要设置标题和同级 div 的样式，以便它们适合可用的视口。

在您的 codepen 中，您的滚动 div 有 height: '100%'。这设置了 div 的样式，因此它不需要滚动，因此无限滚动不起作用。

如果您设置该 div 的样式，使其占用的高度小于可用视口的高度，并渲染足够多的项目来填充它，无限滚动将正常工作。

如果您随后设置标题 div 组合的样式，使其完全适合可用的视口空间，您将不会获得第二个滚动条。

以下是您必须执行此操作的选项。我所做的是将滚动 div 的高度设置为视口高度（100vh）减去100px。这不是精确计算的，但您想要的是从视口的大小中减去标题所需的空间。

这个实现对我来说很好，对你也应该。

class Layout extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
      items: 30,
      loadingState: false
    };
  }

  componentDidMount() {
    this.refs.iScroll.addEventListener("scroll", () => {
      if (this.refs.iScroll.scrollTop + this.refs.iScroll.clientHeight >= this.refs.iScroll.scrollHeight - 20){
        this.loadMoreItems();
      }
    });
  }

  displayItems() {
    var items = [];
    for (var i = 0; i < this.state.items; i++) {
      items.push(<li key={i}>Item {i}</li>);
    }
    return items;
  }

  loadMoreItems() {
	 if(this.state.loadingState){
		 return;
	 }
    this.setState({ loadingState: true });
    setTimeout(() => {
      this.setState({ items: this.state.items + 10, loadingState: false });
    }, 1000);
  }
  
  render() {
    return (<div>
     
        <First />
          <div ref="iScroll" style={{ height: "calc(100vh - 100px)", overflow: "auto"}}>
            <ul>
              {this.displayItems()}
            </ul>
            {this.state.loadingState ? <p className="loading"> loading More Items..</p> : ""}
          </div>
        </div>
    );
  }
}

class First extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
    
    };
  }

  render() {
    return (
      <h1>Testing</h1>

    )
  }
}

ReactDOM.render(<Layout />, document.getElementById('example'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="example"></div>