title: JQuery - appending and deleting html content while scrolling
body: <p>Question: how can i calculate scroll position after deleting (with jquery) some lines at the beginning of a html file - scroll position which will provide view at the same lines as before deleting.</p>
  
  <p>situation overview:
  I have generated HTML page, but i have problems because that generated page may have up to 
  200MB. So i want to:
   + hold all the data in the JS's Array 
   + append content at the end and delete at the beginning dynamically while scrolling down 
   + append content at the beginning and delete at the end while scrolling up</p>
  
  <p>Operations with page beginning are making some unpredictable scrolls to different page parts.
  Here's my code, but i don't feel it's well - there're a lot of unused variables.
  Note that I'm appending lines from array DataLines + in visibleDataLinesNumbers i have indexes of lines which should be shown (there're also some hide/show selected lines functionality). Every line has also its id connected with index in DataLines (id = "l"+indexFromDataLine)</p>
  
  <pre><code>var howManyLinesToAppend = 100;
  var howManyLinesToDelete = 300;
  var whenAppendInPercent = 8/10;
  var contentHeightMax = 15000;
  var logLineDivHeight;
  var lastScrollTop = 0;
  window.onscroll = scrollHandling;
  
  function scrollHandling() {
      var contentHeight = document.getElementById("log").offsetHeight;
      var yOffset = window.pageYOffset;       
      var yPosition = yOffset + window.innerHeight;
  
  
      var st = $(this).scrollTop();   
      if (st &gt; lastScrollTop) {
          downscrollHandling(contentHeight, yOffset, yPosition);
      }
      else {
          upscrollHandling(contentHeight, yOffset, yPosition);
      }
      lastScrollTop = st; 
  }
  
  
  
  function downscrollHandling(contentHeight, yOffset, yPosition) {
      appendDataLinesAtTheEndWhileScrolling(contentHeight, yOffset, yPosition);
      deleteDataLinesAtTheBeginningWhileScrolling(contentHeight, yOffset, yPosition);
  }
  
  function upscrollHandling(contentHeight, yOffset, yPosition) {
      appendDataLinesAtTheBeginningWhileScrolling(contentHeight, yOffset, yPosition);
      deleteDataLinesAtTheEndWhileScrolling(contentHeight, yOffset, yPosition);
  }
  
  function appendDataLinesAtTheBeginningWhileScrolling(contentHeight, yOffset, yPosition) {
      if(lowerBoundOfLinesOnScreen != 0 &amp;&amp; yPosition &lt; (1-whenAppendInPercent)*contentHeight) {
      var tmp ="";
      var startingLowerBoundOfLinesOnScreen = lowerBoundOfLinesOnScreen; 
      for(var i = startingLowerBoundOfLinesOnScreen - howManyLinesToAppend; i &lt; startingLowerBoundOfLinesOnScreen; i++)
          tmp += DataLines[visibleLinesNumbers[i]];   
  
      lowerBoundOfLinesOnScreen -= howManyLinesToAppend;
      $("#l"+startingLowerBoundOfLinesOnScreen).before(tmp);
      }   
  }
  
  function deleteDataLinesAtTheEndWhileScrolling(contentHeight, yOffset, yPosition) {
      if(contentHeight &gt; contentHeightMax) {
          for(var i = upperBoundOfLinesOnScreen  - howManyLinesToDelete; i &lt; upperBoundOfLinesOnScreen; i++)
              $("#l"+visibleLinesNumbers[i]).remove();
  
          upperBoundOfLinesOnScreen -= howManyLinesToDelete;
      }
  }
  
  function appendDataLinesAtTheEndWhileScrolling(contentHeight, yOffset, yPosition) {
      if( yPosition &gt;= contentHeight * whenAppendInPercent ) {
          showDataLines(howManyLinesToAppend);        
      }
  }
  
  function deleteDataLinesAtTheBeginningWhileScrolling(contentHeight, yOffset, yPosition)  {
      if(contentHeight &gt; contentHeightMax) {
          for(var i = lowerBoundOfLinesOnScreen; i &lt; lowerBoundOfLinesOnScreen + howManyLinesToDelete; i++) {
              $("#l"+visibleLinesNumbers[i]).remove();
          }
              lowerBoundOfLinesOnScreen += howManyLinesToDelete;
      }
  }
  </code></pre>