$(window).scrollTop() 与 $(document).scrollTop()答案

【问题标题】：$(window).scrollTop() vs. $(document).scrollTop()$(window).scrollTop() 与 $(document).scrollTop()
【发布时间】：2011-07-19 06:33:37
【问题描述】：

两者有什么区别：

$(window).scrollTop()

和

$(document).scrollTop()

谢谢。

【问题讨论】：

'html' 或 'body' 用于 setter（取决于浏览器）... 'window' 用于 getter... cf Fiddle : jsfiddle.net/molokoloco/uCrLa

标签： javascript jquery window document scrolltop

【解决方案1】：

它们都有相同的效果。

但是，正如 cmets 中所指出的：$(window).scrollTop() 比 $('html').scrollTop() 受到更多网络浏览器的支持。

【讨论】：

它在 IE8 中返回 0（虽然我的页面处于 quirks 模式，这可能是一个因素）
$('html').scrollTop() 不是跨浏览器（作为设置器，它至少在 Chrome 中不起作用）。目前最跨浏览器的方法是：$(window).scrollTop() 作为 getter，$('html,body').scrollTop(offset) 作为 setter。
根据this reference，不带参数scrollTop不会滚动到任何地方，而只是返回当前滚动位置。
@d2burke scrollTop() 是 getter，scrollTop(value) 是 setter。 scrollTop() 不带参数不会改变滚动位置。
@M98 window.scrollTo(x,y)

【解决方案2】：

首先，您需要了解window 和document 之间的区别。 window 对象是顶级客户端对象。 window 对象上方没有任何内容。 JavaScript 是一种面向对象的语言。您从一个对象开始，并将方法应用于其属性或其对象组的属性。例如，document 对象是window 对象的对象。要更改document 的背景颜色，您需要设置document 的bgcolor 属性。

window.document.bgcolor = "red"

为了回答您的问题，window 和 document scrollTop 之间的最终结果没有区别。两者都会给出相同的输出。

在http://jsfiddle.net/7VRvj/6/查看工作示例

一般使用document主要是注册事件，使用window做scroll、scrollTop、resize之类的事情。

【讨论】：

最终结果没有区别。两者都会给出相同的输出。
显然不是，有些浏览器不支持窗口滚动，因为窗口对象可能不是溢出的对象。
什么浏览器不支持window，具体点。这是一个例子jsfiddle.net/7VRvj/4。在所有浏览器中检查它，让我知道它不能在哪个浏览器上运行。

【解决方案3】：

跨浏览器的做法是

var top = ($(window).scrollTop() || $("body").scrollTop());

【讨论】：

注意：$("body").scrollTop() 在谷歌浏览器中总是返回 0。
$("body").scrollTop() 已弃用，does not work on Chrome or FF anymore。它将返回 0

【解决方案4】：

我刚刚遇到了一些与此处描述的 scrollTop 类似的问题。

最后我在 Firefox 和 IE 上使用选择器 $('*').scrollTop(0);

解决了这个问题

如果您有不想影响的元素，但它绕过了 Document、Body、HTML 和 Window 差异，这并不完美。如果有帮助的话……

【讨论】：

你不应该以这种方式使用 *（事实上，完全避免使用 *）。您不是针对一个元素，而是影响整个 DOM。巨大的性能冲击。选择器应尽可能精确。
我个人一直使用$("html,body").scrollTop(val) -- 从来没有任何问题