1

问题：如何在删除（使用 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;
    }
}
4

1 回答 1

1

看看那个脚本：https ://github.com/CardinalPath/gas/blob/master/src/plugins/max_scroll.js 问候

于 2013-10-07T15:01:56.473 回答