如何获得最大文档滚动顶部值答案

【问题标题】：How to get maximum document scrolltop value如何获得最大文档滚动顶部值
【发布时间】：2012-10-18 23:30:43
【问题描述】：

我正在制作一些插件，我需要获取文档的最大 scrollTop 值。最大 scrollTop 值为 2001 ，但 $(document).height() 返回 2668 和 $('body')[0].scrollHeight 给我 undefined。

如何通过javascript/jquery获取2001？！

【问题讨论】：

我想我刚刚想通了... $(document).height - $(window).height
不...这给了我 2011 年。请帮助！
你试过$(document).prop("scrollHeight");，或者如果你有边距搞砸了：$(document).outerHeight() - $(window).outerHeight()，或者得到总滚动高度减去窗口高度：$(document).prop("scrollHeight")-$(window).outerHeight()。
不...第一个给我 2011 ，第二个给我 NaN ...
outerHeight(true) ?

标签： javascript jquery scrolltop

【解决方案1】：

您的 cmets 中的代码应该可以工作：

$(document).height() - $(window).height()

这是一个在您滚动到最大滚动位置时发出警报的示例：http://jsfiddle.net/DWn7Z/

【讨论】：

呃...为什么我有额外的 10 个像素？ :(
@hjuster 两个都试试outerHeight？
又是 2011 年的 outerHeight，没有变化……但无论分辨率如何，差异始终是 10px，这实际上是个好消息！
你怎么知道应该是2001年？我的示例是否适合您？
@hjuster 可能是滚动条高度

【解决方案2】：

这是我写的https://stackoverflow.com/a/48246003/7668448 的答案，它是关于 scrollTopMax 的 polyfill，它是 Element 对象的本机属性。（仅限Mozilla）。看看回复，你真的很喜欢。

下面只是一个快速的 sn-p。链接里的答案比较丰富（一定要看）。

(function(elmProto){
    if ('scrollTopMax' in elmProto) {
        return;
    }
    Object.defineProperties(elmProto, {
        'scrollTopMax': {
            get: function scrollTopMax() {
              return this.scrollHeight - this.clientTop;
            }
        },
        'scrollLeftMax': {
            get: function scrollLeftMax() {
              return this.scrollWidth - this.clientLeft;
            }
        }
    });
}
)(Element.prototype);

使用示例：

var el = document.getElementById('el1');
var max = el.scrollLeftMax;

【讨论】：

我相信this.scrollHeight - this.clientHeight 等同于this.scrollTopMax。

【解决方案3】：

如果您想“猜测”最大滚动顶部值，也许您应该比较文档的高度和视口高度（窗口大小）。

/**
 * Return a viewport object (width and height)
 */
function viewport()
{
    var e = window, a = 'inner';
    if (!('innerWidth' in window))
    {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}

// Retrieve the height of the document, including padding, margin and border
var documentHeight = $(document).outerheight(true);
var viewPortData = viewport();

var maxScrollTop = documentHeight - viewPortData.height;

当然，在你的插件中，你还应该在resize事件上添加一个监听器，并重新计算最大的scrollTop。

【讨论】：

在窗口和文档上使用 outerHeight，它可以正常工作，就像我的功能一样。试试吧！ fiddle.jshell.net/9MAVM/3
对我来说它不起作用，我总是有那些超自然的额外 10 像素。您的函数给我的结果与我的第一个评论相同，$(document).height - $(window).height"。但无论如何，谢谢，考虑这个解决了...

【解决方案4】：

在 vanilla Javascript 中，我目前正在这样做：

getScrollTopMax = function () {
  var ref;
  return (ref = document.scrollingElement.scrollTopMax) != null
      ? ref
      : (document.scrollingElement.scrollHeight - document.documentElement.clientHeight);
};

如果存在则返回Gecko's non-standard scrollTopMax，否则计算它。我在这里使用document.scrollingElement，它只存在于特定的浏览器上，但它是easy to polyfill。

【讨论】：

【解决方案5】：

试试这个，一个简单易行的解决方案：-

document.body.getBoundingClientRect().bottom;

在 W3 Schools 上找到了这个......

【讨论】：