1

質問: html ファイルの先頭にある行を (jquery で) 削除した後のスクロール位置を計算するにはどうすればよいですか? 削除前と同じ行に表示されるスクロール位置。

状況の概要: HTML ページを生成しましたが、生成されたページが最大 200MB になる可能性があるため、問題があります。だから私はしたい： + JSの配列内のすべてのデータを保持 + 最後にコンテンツを追加し、下にスクロールしながら最初に動的に削除 + 最初にコンテンツを追加し、上にスクロールしながら最後に削除

ページの開始に関する操作は、異なるページ部分への予期しないスクロールを行っています。これが私のコードですが、うまくいかないと思います-未使用の変数がたくさんあります。配列 DataLines + からの行を追加していることに注意してください。すべての行には、DataLines のインデックスに接続された ID もあります (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 に答える