[英]JQuery - appending and deleting html content while scrolling
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. 问题:在删除(使用jquery)html文件开头的某些行后,如何计算滚动位置-滚动位置将提供与删除前相同的行的视图。
situation overview: I have generated HTML page, but i have problems because that generated page may have up to 200MB. 情况概述:我已经生成了HTML页面,但是出现了问题,因为该页面可能多达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 所以我想:+保留JS数组中的所有数据+向下滚动时在末尾追加内容并在开始时动态删除+向上滚动时在末尾追加内容并在向上滚动时末尾删除
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). 请注意,我要在visibleDataLinesNumbers中追加来自数组DataLines +的行,我具有应显示的行的索引(还有一些隐藏/显示所选行功能)。 Every line has also its id connected with index in DataLines (id = "l"+indexFromDataLine) 每行的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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.