Question

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

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

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

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;
    }
}

Answer 1

查看该脚本：https://github.com/CardinalPath/gas/blob/master/src/plugins/max_scroll.js 此致

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

1 个答案: