javascript - 获取页面的可滚动高度

Question

首先，我想知道这些术语之间的区别：

- $(window).height() 

- $(document).height() 

- $(window).scrollTop()

这些术语与我有些相似，我无法理解它们之间的明显区别。以下是我的回答：

• $(window).height()：给出用户可以看到的窗口高度。

• $(document).height()：给出文档的总高度。根据页面上的内容，这可以大于/小于窗口高度。

• $(document).scrollTop(): 给出滚动条在窗口中的垂直位置。

真正的问题： 我正在尝试实现延迟加载，当滚动条从页面底部越过一个点 200px 时，我需要调用服务器。我无法使用上述值来获得它。

任何帮助，将不胜感激。

Answer 1

窗口是您可以看到的区域 - 就好像您的屏幕是一个窗口并且您正在查看文档一样。该文档是整个文档 - 它可能比窗口短或长得多。

这是你需要的数学：

if( $(document).height() - $(document).scrollTop() < 200 ){
    //Do something
}

Answer 2

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).scrollTop(); //Get the current vertical position of the scroll bar for the first               element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

$(window).scrollHeight(); //Height of the scroll view of an element; it includes the element padding but not its margin.

Answer 3

最终，在理解了这些术语之后，我弄清楚了应该是什么计算。感谢答案。我的定义几乎是正确的。

function (isScrollable) {
  var isUserAtBottom = ($(window).height() + $(window).scrollTop() + 200 > $(document).height());
  if (isUserAtBottom) {
     // Do something (Like Ajax call to server to fetch new elements) 
     return true;
  }
}