Question

I have a lot of data being placed into a <DIV> with the overflow: auto style. Firefox handles this gracefully but IE becomes very sluggish both when scrolling the div and when executing any Javascript on the page.

At first I thought IE just couldn’t handle that much data in its DOM, but then I did a simple test where I applied the visibility: hidden style to every element past the first 100. They still take up space and cause the scrollbars to appear. IE no longer had a problem with the data when I did this.

So, I’d like to have a “smart” div that hides all the nested div elements which are not currently visible on the screen. Is there a simple solution to this or will I need to have an infinite loop which calculates the location of the scrollbar? If not, is there a particular event that I can hook into where I could do this? Is there a jQuery selector or plugin that will allow me to select all elements not currently visible on the screen?

Answer 1

You want to use display: none instead of visibility: hidden

Elements that are hidden using visibility: hidden will still claim their space in the viewport.

As far as using a “smart” div, as you describe it. You may be interested in something like the jQuery autopager plugin.