javascript - 如何获得最大文档滚动顶部值

Question

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

如何2001通过javascript/jquery？！

Answer 1

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

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

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

Answer 2

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

贝娄只是一个快速的片段。链接里的答案比较丰富（一定要看）。

(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; 

Answer 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。

Answer 4

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

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

如果存在，则返回Gecko 的非标准 scrollTopMax ，否则计算它。我在document.scrollingElement这里使用，它只存在于特定的浏览器上，但很容易 polyfill。

Answer 5

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

document.body.getBoundingClientRect().bottom;

在 W3 学校找到这个......