title: Implement custom infinite scrolling in react
body: <p>am trying to implement infinite scrolling but as the component re-renders the scroll bar goes back all the way to the top as shown below. How to stick scroll bar to where user has scrolled? or is this because component re-renders? But the component has to re-render because new records are added from the api call.
  <a href="https://i.stack.imgur.com/Va7rg.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Va7rg.gif" alt="enter image description here" /></a></p>
  <pre><code>AppList.tsx
  
    //Initial values
    const [pageNumber, setPageNumber] = useState&lt;number&gt;(1);
    const [scrolling, setScrolling] = useState&lt;boolean&gt;(false);
    const [totalPages, setTotalPages] = useState&lt;number&gt;(3);
  
  &lt;div ref={divRef} className={AppList.Container} onScroll={() =&gt; {
          if (scrolling &amp;&amp; totalPages! &lt;= pageNumber!) {
            return;
          }
          else {
            const nodes = document.querySelectorAll('.ms-List-cell');
            const lastLi: Element = nodes[nodes.length - 1];
            const lastLiOffset = lastLi.getBoundingClientRect().top + lastLi.clientHeight;
            const pageOffset = window.pageYOffset + window.innerHeight;
            var bottomOffset = 150;
            if (pageOffset &gt; lastLiOffset - bottomOffset) {
              setScrolling!(true);
              setPageNumber!(pageNumber! + 1);
              dispatch(GetAllAppDefinitions(dispatch, pageNumber! + 1));(Service call)
            }
          }
        }}&gt;
          {updatedColumns.length &gt; 0 &amp;&amp; (
            &lt;DetailsList
              className={appListTableStyle}
              columns={updatedColumns}
              selectionMode={SelectionMode.none}
              items={updatedItems || []}
            /&gt;
          )}
        &lt;/div&gt;
  </code></pre>