使用React JS无限滚动

基本上，在滚动时，您想确定哪些元素是可见的，然后重新渲染以仅显示那些元素，顶部和底部的单个spacer元素代表屏幕外的元素。

Vjeux在这里做了一个小提琴，您可以看一下：jsfiddle。

滚动时执行

scrollState: function(scroll) {    var visibleStart = Math.floor(scroll / this.state.recordHeight);    var visibleEnd = Math.min(visibleStart + this.state.recordsPerBody, this.state.total - 1);    var displayStart = Math.max(0, Math.floor(scroll / this.state.recordHeight) - this.state.recordsPerBody * 1.5);    var displayEnd = Math.min(displayStart + 4 * this.state.recordsPerBody, this.state.total - 1);    this.setState({        visibleStart: visibleStart,        visibleEnd: visibleEnd,        displayStart: displayStart,        displayEnd: displayEnd,        scroll: scroll    });},

然后render函数将只显示range中的行

displayStart..displayEnd