如何获取文档的滚动位置？答案

【问题标题】：How do I get the scroll position of a document?如何获取文档的滚动位置？
【发布时间】：2011-03-25 08:13:06
【问题描述】：

如何获取文档的滚动位置值？

【问题讨论】：

【解决方案1】：

你可以试试这个例子，这段代码把滚动条放在所有DIV标签的底部

记住：jQuery 可以接受一个函数而不是值作为参数。 “this”是jQuery处理的对象，函数返回当前DIV“this”的scrollHeight属性并对文档中的所有DIV进行处理。

$("div").scrollTop(function(){return this.scrollHeight})

【讨论】：

【解决方案2】：

试试这个：

var scrollHeight = $(scrollable)[0] == document ? document.body.scrollHeight : $(scrollable)[0].scrollHeight;

【讨论】：

【解决方案3】：

它使用 HTML DOM 元素，但不使用 jQuery 选择器。它可以像这样使用：

var height = document.body.scrollHeight;

【讨论】：

【解决方案4】：

以下是使用 jQuery 选择器获取元素的scrollHeight 的方法：

$(selector)[0].scrollHeight

如果selector是元素的id（例如elemId），保证数组的0索引项就是你要选择的元素，scrollHeight是正确的。

【讨论】：

注意，根据 Mozilla 知识库，低于 8.0 的 IE 版本不支持 developer.mozilla.org/en/DOM/element.scrollHeight
同意@Tomas，使用 jQuery 的抽象来更好地处理跨浏览器的怪癖。比如上面可以修改为$(selector).offset().top
嗯，没有$(document).offset()返回null，而.offset()与浏览器滚动条的位置无关（.offset()返回item相对于的坐标文件）。我同意我们应该尽可能使用 jQuery，但显然，由于没有跨浏览器支持，jQuery 没有为它提供抽象。
你也可以这样做 $(selector).get(0).scrollHeight
@Dmitri Zaitsev .scrollHeight 是 DOM 节点属性，而不是 jQuery 属性。

【解决方案5】：

为了获得窗口滚动条滚动区域的实际可滚动高度，我使用了$('body').prop('scrollHeight')。这似乎是最简单的工作解决方案，但我没有广泛检查兼容性。 Emanuele Del Grande 指出另一个解决方案，这可能不适用于 8 以下的 IE。

大多数其他解决方案都适用于可滚动元素，但这适用于整个窗口。值得注意的是，对于 Ankit 的解决方案，我遇到了与 Michael 相同的问题，即 $(document).prop('scrollHeight') 正在返回 undefined。

【讨论】：

【解决方案6】：

document.getElementById("elementID").scrollHeight

$("elementID").scrollHeight

【讨论】：

那么您的文档对象的元素 ID 是什么？ ...也许您的意思是“document.body.scrollHeight”？
$('#gallery').scrollHeight 给我 undefined //#gallery 是我溢出的 id：auto 元素，不起作用

【解决方案7】：

如果您使用的是 Jquery 1.6 或更高版本，请使用 prop 访问该值。

$(document).prop('scrollHeight')

以前的版本用于从 attr 获取值，但不是在 1.6 之后。

【讨论】：

使用 jQuery 1.7.1 为我返回“未定义”，$(document).attr("scrollHeight") 也是如此。
那是因为它缺少了 body 元素。它必须是 $(document.body).prop('scrollHeight') - 此时您也可以使用 document.body.scrollHeight;

【解决方案8】：

这样的事情应该可以解决你的问题：

$.getDocHeight = function(){
     var D = document;
     return Math.max(Math.max(D.body.scrollHeight,    D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};

alert( $.getDocHeight() );

Ps：每次需要时调用该函数，警报是为了测试目的..

【讨论】：

由于某种原因，这个功能对我来说不能正常工作；在 iframe 中使用它。的实际高度是 256px，这个函数给了我 337px，我不知道它是从哪里来的。附言我正在使用 Chrome 18。
@jurchiks：你有链接到那个 iframe 在哪里，让我看看吗？
blade.dateks.lv/salidzinat?ids=58664,43586 。单击任何问号。我已经设法修复了大部分问题，但其中两个（还有更多取决于被比较的项目）在底部仍然有一些奇怪的、神秘的 ~20px 边距。当我调整窗口大小时它消失了，因为我让它改变了窗口调整大小时的弹出尺寸。

【解决方案9】：

$(document).height() //returns window height

$(document).scrollTop() //returns scroll position from top of document

【讨论】：

我的想法是一样的，但是为什么 console.log($(this).scrollTop()) = 1187 console.log($(this).height()) = 1762 它不同非常？如果我滚动到页面底部，则为 575px。那些 575px 去哪儿了？滚动条不能是 576px :)
咩，又是我的错。我正在查看带有打开的萤火虫窗口的滚动条。 Ofc 现在可以是 576px。 :) 谢谢，我猜这个话题已经结束了。
-1 - 这很好，但没有回答关于scrollHeight 的问题。
正确，这是一个 jquery 问题。但是 $(document).height() 或 $(document).scrollTop() 都没有提供所需的信息。该请求是针对 scrollHeight 的。 scrollHeight 值是元素可用的总高度（如果它是可滚动的，则该值可能大于它的高度）。 scrollTop 返回元素离顶部的距离。两者都没有回答总可用高度是多少。关于scrollHeight的理解见help.dottoro.com/ljbixkkn.php
这被标记为答案，因为它回答了提问者的 intended 问题，这是关于文档当前滚动的高度... ergo "scrollHeight. "巧合的是，这个名称用于不同的上下文。