$(window).scrollTop()与$(document).scrollTop()的区别

Question

以下是“什么是”的不同之处：

$(window).scrollTop()

并且

$(document).scrollTop()

感谢您的选择。

谢谢。

- frenchie

---

对于设置器，根据浏览器使用'html'或'body'... 对于获取器，使用'window'... 参考Fiddle：http://jsfiddle.net/molokoloco/uCrLa/ - molokoloco

Answer 1

它们都将有相同的效果。

但是，正如评论中指出的那样：$(window).scrollTop()被更多的Web浏览器支持比$('html').scrollTop().

- Bodman

---

它在 IE8 中返回 0 （尽管我的页面处于“怪异模式”，这可能会影响结果）。 - oglester

$('html').scrollTop() 在不同浏览器中并非通用（作为setter在Chrome上至少无法工作）。目前最通用的方法是：$(window).scrollTop() 用作getter，$('html,body').scrollTop(offset) 用作setter。 - Georgii Ivankin

根据这个引用，没有参数时，scrollTop不会滚动到任何地方，而是返回当前滚动位置。 - O. R. Mapper

scrollTop()是一个获取器，scrollTop(value)是一个设置器。不带参数的scrollTop()不会改变滚动位置。 - user1107907

@M98 window.scrollTo(x,y) - Bodman

Answer 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这样的操作。

- Hussein

---

最终结果没有区别。两者将会给出相同的输出。 - Hussein

显然不是所有浏览器都支持窗口滚动，因为窗口对象可能不是溢出的对象。 - Bodman

有哪些浏览器不支持window对象？请具体说明。这里提供了一个例子http://jsfiddle.net/7VRvj/4/。请在所有浏览器中进行测试，并告诉我哪个浏览器无法正常运行。 - Hussein

Answer 3

跨浏览器实现这个的方法是：

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

- amachree tamunoemi

---

注意：在Google Chrome中，$("body").scrollTop()始终返回0。 - Jonathan Parent Lévesque

$("body").scrollTop()已经被弃用，在Chrome或FF上不再起作用（参见https://bugs.chromium.org/p/chromium/issues/detail?id=766938）。它将返回0。 - Jorge Lazo

Answer 4

我刚遇到了这里描述的scrollTop类似的问题。

最终，我通过使用选择器$('*').scrollTop(0);在Firefox和IE上解决了这个问题。

如果你有不想影响的元素，这并不完美，但它可以解决文档、正文、HTML和窗口之间的差异。如果有帮助...

- Tapiochre

---

永远不要以这种方式使用（事实上，完全避免使用）。你会影响整个DOM而不是一个元素。对性能有很大的影响。选择器应该尽可能精确。 - Vlad

我个人一直使用 $("html,body").scrollTop(val) -- 从未遇到任何问题。 - Roi