1 2 3 4 5 6 Scroll1 = function() {7 8 this.setParentNode = function(parentNode) {9 parentNode.appendChild(prop);10 parentNode.appendChild(dom);11 }12 13 var watch = function(valor) {14 prop.innerHTML += valor + '<br>';15 }16 17 var watchClear = function() {18 prop.innerHTML = 'PROPIEDADES ('+refresh_count+')<BR>';19 refresh_count++;20 }21 22 this.refresh = function() {23 watchClear();24 watch('scrollTop: '+dom.scrollTop);25 watch('scrollHeight: '+dom.scrollHeight);26 watch('offsetTop: '+dom.offsetTop);27 watch('offsetHeight: '+dom.offsetHeight);28 watch('clientTop: '+dom.clientTop);29 30 31 var t = dom.scrollTop + dom.offsetHeight/2;32 33 for (i=0; i<N1; i++) {34 for (j=0; j<N2; j++) {35 /*a[i*1000+1+j].innerHTML = ''36 +'scrollTop: '+a[i*1000+1+j].scrollTop37 +'<br>scrollHeight: '+a[i*1000+1+j].scrollHeight38 +'<br>offsetTop: '+a[i*1000+1+j].offsetTop39 +'<br>offsetHeight: '+a[i*1000+1+j].offsetHeight40 +'<br>clientTop: '+a[i*1000+1+j].clientTop41 ;*/42 43 44 45 if ( t > a[i*1000+1+j].offsetTop && t < a[i*1000+1+j].offsetHeight + a[i*1000+1+j].offsetTop) {46 if (a[i*1000+1+j].style.backgroundColor != 'silver') {47 a[i*1000+1+j].style.backgroundColor = 'silver';48 ajax_loads++;49 }50 i=N1;51 j=N2;52 } else {53 //a[i*1000+1+j].style.background = 'white';54 }55 56 57 58 }59 }60 watch('AjaxLoads: '+ajax_loads);61 }62 63 64 dom = document.createElement('div');65 dom.style.height = '400px';66 dom.style.border = 'solid red 1px';67 dom.style.overflow = 'scroll';68 dom.style.margin = '10px 310px 0 310px';69 dom.addEventListener('scroll', this.refresh, true);70 71 prop = document.createElement('div');72 prop.style.width = '300px';73 prop.style.cssFloat = 'left';74 prop.style.border = 'solid blue 1px';75 watchClear();76 77 var N1 = 100;78 var N2 = 100;79 80 var ajax_loads = 0;81 82 var a = Array();83 for (i=0; i<N1; i++) {84 a[i*1000] = document.createElement('div');85 //a[i*1000].style.width = '200px';86 a[i*1000].style.border = 'solid orange 1px';87 a[i*1000].style.margin = '10px';88 dom.appendChild(a[i*1000]);89 for (j=0; j<N2; j++) {90 a[i*1000+1+j] = document.createElement('div');91 a[i*1000+1+j].style.width = '200px';92 a[i*1000+1+j].style.height = '200px';93 a[i*1000+1+j].style.border = 'solid green 1px';94 a[i*1000+1+j].style.margin = '10px';95 a[i*1000].appendChild(a[i*1000+1+j]);96 }97 }98 99 var refresh_count = '0';100 101 }Enlace
El enlace para compartir es: