javascript - JQuery - appending and deleting html content while scrolling -
question: how can calculate scroll position after deleting (with jquery) lines @ beginning of html file - scroll position provide view @ same lines before deleting.
situation overview: have generated html page, have problems because generated page may have 200mb. want to: + hold data in js's array + append content @ end , delete @ beginning dynamically while scrolling down + append content @ beginning , delete @ end while scrolling up
operations page beginning making unpredictable scrolls different page parts. here's code, don't feel it's - there're lot of unused variables. note i'm appending lines array datalines + in visibledatalinesnumbers have indexes of lines should shown (there're hide/show selected lines functionality). every line has id connected index in 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 = startinglowerboundoflinesonscreen - howmanylinestoappend; < startinglowerboundoflinesonscreen; i++) tmp += datalines[visiblelinesnumbers[i]]; lowerboundoflinesonscreen -= howmanylinestoappend; $("#l"+startinglowerboundoflinesonscreen).before(tmp); } } function deletedatalinesattheendwhilescrolling(contentheight, yoffset, yposition) { if(contentheight > contentheightmax) { for(var = upperboundoflinesonscreen - howmanylinestodelete; < 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 = lowerboundoflinesonscreen; < lowerboundoflinesonscreen + howmanylinestodelete; i++) { $("#l"+visiblelinesnumbers[i]).remove(); } lowerboundoflinesonscreen += howmanylinestodelete; } }
take on script: https://github.com/cardinalpath/gas/blob/master/src/plugins/max_scroll.js regards
Comments
Post a Comment