StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POVery large html page : Need pointers on implementing a virtual scrolling
text
Body
copied!<p>First, sorry for my English.</p> <p>I have a very large html page that is created in asp.net. We are stuck with IE8, and unfortunately, IE8 is pretty bad at handling such large html pages. For example, when the page is fully generated, if I click on a simple button that shows a javascript alert, it takes forever to display the alert. I've tested the same page with firefox, and it works perfectly, so the problem is really with IE8. Again, using another browser is not an option :(</p> <p>Basicaly, the information is displayed with 3 nested Listviews that generate ULs and LIs to simulate a tree. My client doesnt want to have a gridview with a pager; he wants to be able to scroll the page.</p> <p>So the only way to deal with the large page would be to remove elements from the DOM when those elements are out of the viewport and I need a few pointers. How would you guys implement such a 'virtual' scroller for the page? We are using Jquery if that can help.</p> <p>Here's what I thought:</p> <p>On page scrolling, I can easily detect that an element is out of the viewport and could be removed from the DOM. Where should I keep the innerhtml of that element? In a javascript variable?</p> <p>Then, let's say I remove an element from the DOM by doing something like container.getElementById.innerHTML = '', of course, the height of the container will be reduced, which could cause other issues, like the scroll bar that will expand. How can I keep remove the content of the element container, but keeping the height of the container?</p> <p>Also, if I manage to remove an element when scrolling the page down, then if I scroll the page up, how can I detect that the element should be shown?</p> <p>Thank you in advance for your help!</p> <p><strong>Update</strong>: I realize that I wasn't clear in the first place. If I implement a virtual scroller that add items to the page, the page will still get too big after some time. More than adding items dynamically, the real problem is to remove items from the DOM that are not shown on the screen, and add them back when they should be shown.</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