为何 `document.body.scrollTop` 的值总是 0？

许多初级前端开发人员都曾遇到过这个问题：在使用 document.body.scrollTop 获取滚动距离时，总得到 0 这个结果。这让他们感到非常困惑，不知道该如何解决。

实际上，问题并不是出在你的代码上，而是因为你对 document.body.scrollTop 的用法存在误解。

在标准模式下，你应该使用 document.documentElement.scrollTop 来获取滚动距离，而不是 document.body.scrollTop。这是因为在标准模式下，document.body 的父元素是 document.documentElement，而不是 document.body。因此，当你在标准模式下使用 document.body.scrollTop 时，你实际上是在获取 document.documentElement 的滚动距离，而 document.documentElement 的滚动距离总是 0。

而在怪异模式下，你确实应该使用 document.body.scrollTop 来获取滚动距离。这是因为在怪异模式下，document.body 的父元素是 document.body，而不是 document.documentElement。因此，当你在怪异模式下使用 document.body.scrollTop 时，你实际上是在获取 document.body 的滚动距离。

所以，如果你想正确地获取滚动距离，那么你应该根据你正在使用的模式来选择使用 document.documentElement.scrollTop 还是 document.body.scrollTop。

下面是一些使用 document.documentElement.scrollTop 和 document.body.scrollTop 的示例：

// 获取标准模式下的滚动距离
var scrollTop = document.documentElement.scrollTop;

// 获取怪异模式下的滚动距离
var scrollTop = document.body.scrollTop;

你也可以使用 window.pageYOffset 来获取滚动距离。window.pageYOffset 在标准模式和怪异模式下都可用。

// 获取滚动距离
var scrollTop = window.pageYOffset;

希望这篇文章能帮助你解决 document.body.scrollTop 的值总是 0 的问题。如果你还有其他问题，欢迎在评论区留言。