在网页开发中，有时我们需要获取或设置页面的滚动位置和内容高度，以实现一些交互效果或布局调整。但是，这些信息并不是一目了然的，因为不同的浏览器和标准对于这些属性的定义和计算方式有所差异。本文将介绍两个常用的属性：document.documentElement.scrollTop 和 document.body.scrollHeight，它们分别表示整个文档和 body 元素的滚动位置和内容高度。我们将比较它们的异同，并给出一些使用建议。
document.documentElement.scrollTop 是一个只读属性，它返回文档根元素（即 <html> 元素）的垂直滚动偏移量，即文档顶部超出视口的像素数。这个属性的值随着用户滚动页面而变化，当页面滚动到最顶部时，它的值为 0，当页面滚动到最底部时，它的值为 document.documentElement.scrollHeight document.documentElement.clientHeight，其中 document.documentElement.scrollHeight 是文档根元素的总高度，document.documentElement.clientHeight 是文档根元素的可见高度。
document.documentElement.scrollTop 的兼容性取决于浏览器的渲染模式，即是否遵循标准模式或怪异模式。在标准模式下，所有主流浏览器都支持这个属性，但在怪异模式下，一些旧版浏览器（如 IE6，IE7，IE8）会返回 0，而不是正确的滚动位置。因此，为了保证兼容性，建议在使用这个属性之前检查文档的渲染模式，或者使用其他的替代属性，如 window.pageYOffset 或 document.scrollingElement.scrollTop。
document.body.scrollHeight 也是一个只读属性，它返回 body 元素（即 <body> 元素）的总高度，包括不可见的部分，如超出视口的内容，内边距，滚动条，边框等。这个属性的值不随着用户滚动页面而变化，而是根据 body 元素的内容和样式而确定。当 body 元素的内容高度小于或等于视口高度时，这个属性的值等于视口高度，当 body 元素的内容高度大于视口高度时，这个属性的值等于内容高度。
document.body.scrollHeight 的兼容性较好，大多数浏览器都支持这个属性，但是它的值并不一定反映整个文档的高度，因为 body 元素可能不是文档的唯一子元素，或者 body 元素的高度可能被限制或缩放。因此，如果要获取整个文档的高度，建议使用 document.documentElement.scrollHeight 或 Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)。
document.documentElement.scrollTop 和 document.body.scrollHeight 是两个不同的属性，分别表示整个文档和 body 元素的滚动位置和内容高度。这两个属性的值通常不相等，因为它们的作用对象和含义不同，而且页面的滚动和布局会影响它们的计算。如果要获取当前的滚动位置，可以使用 window.pageYOffset 或 document.scrollingElement.scrollTop，这两个属性在现代浏览器中兼容性更好。如果要获取 body 元素的总高度，可以使用 document.body.scrollHeight，这个属性包括不可见的部分。