title: Infinite Scrolling of <table /> element in react.js
body: <p>I have a particularly interesting problem with respect to infinite scrolling using react.js.</p>
  
  <p>The goal here is to make sure no matter how large a table becomes, we only ever let <code>render()</code> return a fixed subset of all rows.</p>
  
  <p>We will let <code>lowerVisualBound</code> and <code>upperVisualBound</code> denote the subset of rows to <code>render()</code> onto the DOM. </p>
  
  <p><strong>Note</strong> these bounds are set to be larger than the viewport, causing a scrollbar to appear.</p>
  
  <p>We will modify <code>lowerVisualBound</code> and <code>upperVisualBound</code> as the user scrolls.</p>
  
  <p>Here, we further denote </p>
  
  <ul>
  <li><code>height</code> as the height of the <em>visible</em> portion of the table</li>
  <li><code>totalHeight</code> as the height of the entire table (that includes all rows between <code>lowerVisualBound</code> and <code>upperVisualBound</code></li>
  <li><code>scrollTop</code> and <code>state.lastScrollTop</code> as the current and previous scroll top respectively</li>
  </ul>
  
  <p><strong>The Following Snippet Kind of Does the Trick</strong> - Except the scrollbar itself does not change position after additional data has been loaded (i.e. <code>upper or lower</code> VisualBound reset). This causes the user's view of the data to jump.</p>
  
  <pre><code>    const rowDisplayBoundry = 2 * this.props.pageSize;
      if (scrollTop &lt; this.state.lastScrollTop &amp;&amp; scrollTop &lt;= 0.0 * totalHeight) {
          // up scroll limit triggered
          newState.lowerVisualBound = Math.max(this.state.lowerVisualBound - this.props.pageSize, 0);
          newState.upperVisualBound = newState.lowerVisualBound + rowDisplayBoundry;
      } else if (scrollTop &gt; this.state.lastScrollTop &amp;&amp; (scrollTop + height) &gt; totalHeight) {
          // down scroll limit triggered
          newState.upperVisualBound = this.state.upperVisualBound + this.props.pageSize;
          newState.lowerVisualBound = newState.upperVisualBound - rowDisplayBoundry;
      }
  // TODO now what do we set scrollTop to, post these mutations? (presumably using a setTimeout())
  </code></pre>
  
  <p>Can anyone suggest an algorithm to compute a new <code>scrollTop</code> such that changing the visual bound preserve the user's view?</p>
  
  <p><strong>Note</strong> I believe this should be theoretically possible because the # of rows between upper &amp; lower visual bound is set to be > what can be displayed in the viewport. Therefore, after each mutation in those bounds, the user does not lose any rows that he was viewing immediately before the mutation. It is only a matter of computing the correct location the scrollbar post-mutation.</p>