Javascript JQuery-滚动时追加和删除html内容

问题：删除（使用jquery）html文件开头的一些行后，如何计算滚动位置？滚动位置将提供与删除前相同行的视图

情况概述： 我已经生成了HTML页面，但我有问题，因为生成的页面可能有多达 200MB。所以我想： +保存JS数组中的所有数据 +向下滚动时，在末尾追加内容并在开头动态删除 +向上滚动时，在开头追加内容，在结尾删除内容

页面开始的操作会使一些不可预测的滚动到不同的页面部分。 这是我的代码，但我觉得不太好——有很多未使用的变量。 请注意，我在VisibleDataLines中添加了数组DataLines+中的行。我有一些应该显示的行的索引（还有一些隐藏/显示选定行的功能）。每一行的id都与数据行中的索引相连接（id=“l”+indexFromDataLine）

var howManyLinesToAppend=100；
var HowmanyNestodelet=300；
var whenAppendInPercent=8/10；
var contentHeightMax=15000；
变量logLineDivHeight；
var lastScrollTop=0；
window.onscroll=滚动处理；
函数scrollHandling（）{
var contentHeight=document.getElementById（“log”）.offsetHeight；
var yOffset=window.pageYOffset；
变量yPosition=yOffset+window.innerHeight；
var st=$（this.scrollTop（）；
如果（st>lastScrollTop）{
向下滚动处理（内容高度、Y偏移、Y位置）；
}
否则{
上卷处理（内容高度、Y偏移、Y位置）；
}
lastScrollTop=st；
}
函数向下滚动处理（内容高度、Y偏移、Y位置）{
在结尾处添加数据行（内容高度、Y偏移、Y位置）；
删除开始时的数据行（内容高度、偏移量、位置）；
}
函数upscrollHandling（内容高度、Y偏移、Y位置）{
在开始时添加数据行（内容高度、偏移量、位置）；
在结束时删除数据行（内容高度、Y偏移、Y位置）；
}
函数在开始时添加数据行（内容高度、Y偏移、Y位置）{
如果（LowerBoundoflinesScreen！=0&&Y位置<（1-whenAppendInPercent）*内容高度）{
var tmp=“”；
var STARTINGLOWERBOUNDOFRINESONSCLEEN=LOWERBOUNDOFRINESONSCLEEN；
对于（变量i=开始LowerBoundoflinesScreen-出现的次数；i<开始LowerBoundoflinesScreen；i++）
tmp+=数据线[VisibleLinesNumber[i]]；
LowerBondFlinesScreen-=出现的数量；
$（“#l”+启动Lowerboundofrienscreen）。之前（tmp）；
}   
}
函数deletedatalinesattewhilescrolling（contentHeight、yOffset、yPosition）{
如果（内容高度>内容高度最大值）{
对于（var i=线性屏幕的上限-HowmanyLinesModele；i<线性屏幕的上限；i++）
$（“#l”+可见行成员[i]）.remove（）；
屏幕上的线的上限-=Howmanylinestodele；
}
}
函数在结束时添加数据行（内容高度、Y偏移、Y位置）{
如果（yPosition>=contentHeight*whenAppendInPercent）{
显示数据行（howManyLinesToAppend）；
}
}
函数DeleteDataLines在开始时进行滚动（内容高度、Y偏移、Y位置）{
如果（内容高度>内容高度最大值）{
对于（变量i=LowerBoundoflinesScreen；i

看看这个脚本：

---

关于

请看一下该脚本：

---

为了确保。。。您正在使用AJAX获取数据，对吗？否则，您可能不会显示它，但您仍然会加载数据，这将是相当沉重的…您的问题到底是什么？我不明白你在问我们什么。也许这篇文章会帮助你@Bartdude数据一直在数组中，而且它真的很轻，也就是说我的firefox工作正常。（当我一次将其全部加载到DOM时，我必须硬重启计算机）。这样做是个好主意，但我有一个约束条件，必须将所有内容都放在一个文件中。@Nunners问得好，因为我没有问任何问题。但也许有人可以提供一些解决方案，当我在开始删除一些div时，如何计算我的页面将滚动到哪里。。。您正在使用AJAX获取数据，对吗？否则，您可能不会显示它，但您仍然会加载数据，这将是相当沉重的…您的问题到底是什么？我不明白你在问我们什么。也许这篇文章会帮助你@Bartdude数据一直在数组中，而且它真的很轻，也就是说我的firefox工作正常。（当我一次将其全部加载到DOM时，我必须硬重启计算机）。这样做是个好主意，但我有一个约束条件，必须将所有内容都放在一个文件中。@Nunners问得好，因为我没有问任何问题。但也许有人可以提供一些解决方案，当我在开始删除一些div时，如何计算我的页面将滚动到哪里。

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 > 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 && yPosition < (1-whenAppendInPercent)*contentHeight) {
    var tmp ="";
    var startingLowerBoundOfLinesOnScreen = lowerBoundOfLinesOnScreen; 
    for(var i = startingLowerBoundOfLinesOnScreen - howManyLinesToAppend; i < startingLowerBoundOfLinesOnScreen; i++)
        tmp += DataLines[visibleLinesNumbers[i]];   

    lowerBoundOfLinesOnScreen -= howManyLinesToAppend;
    $("#l"+startingLowerBoundOfLinesOnScreen).before(tmp);
    }   
}

function deleteDataLinesAtTheEndWhileScrolling(contentHeight, yOffset, yPosition) {
    if(contentHeight > contentHeightMax) {
        for(var i = upperBoundOfLinesOnScreen  - howManyLinesToDelete; i < upperBoundOfLinesOnScreen; i++)
            $("#l"+visibleLinesNumbers[i]).remove();

        upperBoundOfLinesOnScreen -= howManyLinesToDelete;
    }
}

function appendDataLinesAtTheEndWhileScrolling(contentHeight, yOffset, yPosition) {
    if( yPosition >= contentHeight * whenAppendInPercent ) {
        showDataLines(howManyLinesToAppend);        
    }
}

function deleteDataLinesAtTheBeginningWhileScrolling(contentHeight, yOffset, yPosition)  {
    if(contentHeight > contentHeightMax) {
        for(var i = lowerBoundOfLinesOnScreen; i < lowerBoundOfLinesOnScreen + howManyLinesToDelete; i++) {
            $("#l"+visibleLinesNumbers[i]).remove();
        }
            lowerBoundOfLinesOnScreen += howManyLinesToDelete;
    }
}