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。这不是精确计算的，但你想要的是从视口的大小中减去标题所需的空间。

这个实现对我来说很好，也适合你。

＆＃13;

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'));

＆＃13;

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

＆＃13;

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

1 个答案: