Databases
StackOverflow2013
Postsdbo
POLarge list rendering in JavaScript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLarge list rendering in JavaScript
    text
    copied!<p>I am trying to render the list based on virtual rendering concept. I am facing some minor issues, but they are not blocking the behaviour. Here is the working fiddle <a href="http://jsfiddle.net/53N36/9/" rel="nofollow">http://jsfiddle.net/53N36/9/</a> and Here are my problems </p> <ol> <li>Last items are not visible, I assume some where I missed indexing.(Fixed, Please see the edit)</li> <li>How to calculate scrollPosition if I want to add custom scroll to this.</li> <li>Is this the best method or any other?</li> </ol> <p>I have tested it with 700000 items and 70 items in chrome. Below is the code </p> <pre><code>(function () { var list = (function () { var temp = []; for (var i = 0, l = 70; i &lt; l; i++) { temp.push("list-item-" + (i + 1)); } return temp; }()); function listItem(text, id) { var _div = document.createElement('div'); _div.innerHTML = text; _div.className = "listItem"; _div.id = id; return _div; } var listHold = document.getElementById('listHolder'), ht = listHold.clientHeight, wt = listHold.clientWidth, ele = listItem(list[0], 'item0'), frag = document.createDocumentFragment(); listHold.appendChild(ele); var ht_ele = ele.clientHeight, filled = ht_ele, filledIn = [0]; for (var i = 1, l = list.length; i &lt; l; i++) { if (filled + ht_ele &lt; ht) { filled += ht_ele; ele = listItem(list[i], 'item' + i); frag.appendChild(ele); } else { filledIn.push(i); break; } } listHold.appendChild(frag.cloneNode(true)); var elements = document.querySelectorAll('#listHolder .listItem'); function MouseWheelHandler(e) { var e = window.event || e; var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); console.log(delta); //if(filledIn[0] != 0 &amp;&amp; filledIn[0] != list.length){ if (delta == -1) { var start = filledIn[0] + 1, end = filledIn[1] + 1, counter = 0; if (list[start] &amp;&amp; list[end]) { for (var i = filledIn[0]; i &lt; filledIn[1]; i++) { if (list[i]) { (function (a) { elements[counter].innerHTML = list[a]; }(i)); counter++; } } filledIn[0] = start; filledIn[1] = end; } } else { var start = filledIn[0] - 1, end = filledIn[1] - 1, counter = 0; if (list[start] &amp;&amp; list[end]) { for (var i = start; i &lt; end; i++) { if (list[i]) { (function (a) { elements[counter].innerHTML = list[a]; }(i)); counter++; } } filledIn[0] = start; filledIn[1] = end; } } //} } if (listHold.addEventListener) { listHold.addEventListener("mousewheel", MouseWheelHandler, false); listHold.addEventListener("DOMMouseScroll", MouseWheelHandler, false); } else listHold.attachEvent("onmousewheel", MouseWheelHandler); }()); </code></pre> <p>Please suggest me on this.</p> <p><b>EDIT:</b> I have tried again and I am able to fix the indexing issue. <a href="http://jsfiddle.net/53N36/26/" rel="nofollow">http://jsfiddle.net/53N36/26/</a> But how can I calculate the scroll position based on the array list currently displayed.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload