Home/ Questions/Q 8618361
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T06:05:21+00:00

I’m implementing an infinite-scroll, which means I’m appending chunks of content into the DOM

  • 0

I’m implementing an infinite-scroll, which means I’m appending chunks of content into the DOM (via jquery and javascript).

To make this feel smooth for the user, we need to do some manual scrolling to keep the content window “in the same place”, especially as we prepend text in front of what the user is seeing. To accomplish this (prepend a chunk, then scroll the content down by the exact amount we prepended) we need to be able to determine the HEIGHT of the content we just prepended. This is where Firefox and IE differ. Firefox handles this correctly, and scrolls to the correct place in my content, but IE is reporting about 600px as the height when the true value is around 2400px. 

var h1 = $(document).height(); //take the height before appending
$('#textChunks').prepend(newContent); // prepend stuff on top
var h2 = $(document).height();//take the height again...
alert(h2-h1);

The alerted value is consistently wrong in IE (off by a factor of 3), and it’s consistent no matter how I take the measurement (I could instead measure the height of the ‘newContent’ after it’s in the DOM and IE still reports it wrong, but consistently). Even other ‘built in’ javascript functions such as .scrollIntoView() seem to be off by exactly this amount in IE.

As a sanity check, I can create a stand-alone html file on my desktop with a sample of my content, and in this situation it works. So the problem seems to be only with content added after the pageload.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    the answer is QUIRKS MODE!

    a great reference: http://webdesign.about.com/cs/doctype/a/aaquirksmode.htm

    as a quick test, I changed my local settings (F12 in IE, and then change the ‘Document Mode’ from Quirks to IE9 standard), which fixed my scrolling issue!

    Without the doctype declaration, IE was defaulting to quirks mode which apparently makes it report incorrect heights on elements added to the DOM after pageload, which naturally makes scrolling unreliable. Also note that i was working in a frame inside a frame inside a frame, so the best place to specify the DOCTYPE for my content was in the OUTERMOST FRAME.

    • 0