React 无限滚动 - 双滚动条显示 - 我只想要 window 滚动条

Question

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

代码来自Whosebug answer here，我阅读了他的完整答案，我尝试将高度设置为100%，但它使无限滚动不起作用。 : Whosebug- 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 以便它们适合可用的视口。

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

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

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

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

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

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>

React 无限滚动 - 双滚动条显示 - 我只想要 window 滚动条

React infinite scroll- double scrollbars showing- I only want the window scroll bar

javascript

infinite-scroll

reactjs