解决 $(document).scrollTop() 总是返回 0 的问题

在前端开发中，我们经常需要获取页面滚动条的位置。通常情况下，我们会使用 jQuery 的 $(document).scrollTop() 方法来获取滚动条距离顶部的距离。但是，有时候会遇到这样一个问题：该方法总是返回 0，即使页面已经滚动了。

原因分析

该问题的原因是因为在一些浏览器中（比如 Chrome），$(document).scrollTop() 已经不再起作用，而应该使用 $(window).scrollTop()。

解决方案

为了解决该问题，我们可以根据不同的情况来采取不同的措施。

方案一：使用 $(window).scrollTop()

如上所述，在一些浏览器中，使用 $(window).scrollTop() 方法可以正确地获取滚动条的位置。

var scrollTop = $(window).scrollTop();

方案二：检查 HTML 和 Body 元素的高度

如果使用 $(window).scrollTop() 方法仍然无法获取到正确的值，那么我们需要检查一下 HTML 和 Body 元素的高度是否被正确设置了。一些浏览器会出现这个问题，特别是在使用一些 CSS 样式库时。

html,
body {
  height: 100%;
}

方案三：使用原生 JavaScript 获取滚动条位置

如果以上两种方法都不能解决问题，我们可以使用原生 JavaScript 来获取滚动条的位置。通过 document.documentElement.scrollTop 和 document.body.scrollTop 可以获取到当前文档顶部到视口顶部的距离，然后取其中非零的那一个即可。

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

总结

在前端开发中，获取页面滚动条的位置是一个常见需求。如果遇到 $(document).scrollTop() 方法总是返回 0 的问题，我们可以根据不同的情况采取不同的措施来解决。无论选择哪种方案，都需要注意浏览器兼容性和代码的可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14582