Question

我正在实现无限滚动，这意味着我将内容块添加到DOM中（通过jquery和javascript）。

为了让用户感觉顺畅，我们需要进行一些手动滚动以使内容窗口“保持在同一位置”，尤其是当我们在用户看到的内容前面添加文本时。为了实现这一点（预先添加一个块，然后按照我们前面提到的确切数量向下滚动内容），我们需要能够确定我们刚刚预先添加的内容的高度。这是Firefox和IE不同的地方。 Firefox正确处理，并滚动到我的内容中的正确位置，但IE报告大约600px作为真实值大约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);

IE中的警报值一直是错误的（关闭3倍），无论我如何进行测量，它都是一致的（我可以在DOM和IE之后测量'newContent'的高度报告错了，但始终如一）。甚至其他“内置”的javascript函数，例如.scrollIntoView（）似乎也完全偏离IE中的这个数量。

作为一个完整性检查，我可以在桌面上创建一个独立的html文件，其中包含我的内容样本，在这种情况下它可以正常工作。所以问题似乎只是在页面加载后添加了内容。

Answer 1

答案是QUIRKS MODE！

一个很棒的参考：http://webdesign.about.com/cs/doctype/a/aaquirksmode.htm

作为快速测试，我更改了我的本地设置（IE中的F12，然后将'文档模式'从Quirks更改为IE9标准），这修复了我的滚动问题！

没有doctype声明，IE默认为quirks模式，这显然使得它在页面加载后添加到DOM的元素报告不正确的高度，这自然使滚动不可靠。另请注意，我正在框架内框架内的框架中工作，因此为我的内容指定DOCTYPE的最佳位置是在OUTERMOST FRAME中。

Answer 2

使用HTMLElement.offsetHeight获取任何HTMLElement的“真实”高度。

IE报告页面加载后添加的内容不正确.height（）

2 个答案: