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

Question

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

代码来自 stackoverflow 回答这里，我阅读了他的完整答案，我尝试将高度设置为 100%，但这使得无限滚动不起作用。：Stackoverflow- 由 Aniket Jha 回答（最长的回答，有 4 票赞成）

• 当我以这种方式呈现时，会发生双滚动：

  <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>
  

如果有帮助的话我有 Codepen 的链接

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 中，你有height: '100%'滚动 div。这对 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>