逻辑
判断内容滚动到底需要知道的信息和对应下面的三个API
element.scrollHeight  //内容区域的真实高度(也就是滚动区域)只读属性】

element.scrollTop  //滚动条距离顶部的位置
//可以获取或者设置元素的偏移值,常用于计算滚动条的位置,当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0.

element.clientHeight  //读取元素的可见高度【只读属性】

判定元素是否滚动到底
下面直接引用MDN上面的一个经典的公式
如果元素滚动到底,下面等式返回true,没有则返回false.
element.scrollHeight - element.scrollTop === element.clientHeight

实践
在文档使用了DTD时,当在document上绑定scroll事件,但document.body.scrollTop的值为0,此时需要使用document.documentElement.scrollTop来获取滚动条滚过的长度;在未使用DTD定义文档时,使用document.body.scrollTop获取值。现在我一般都使用html5 <!doctype html>  定义文档,所以一般情况都用document.documentElement

资料: DTD

DTD告诉浏览器当前文档用的是什么标记语言,然后浏览器才能正确的根据W3C标准解析文档代码。
目前htmlDTD有三种类型:

  • Strict DTD:严格的文档类型定义
    不能包含已过时的元素(或属性)和框架元素。
  • Transitional DTD:过渡的文档类型定义
    能包含已过时的元素和属性但不能包含框架元素。
  • Frameset DTD: 框架集文档类型定义
    能包含已过时的元素和框架元素。

在html文档中定义DTD就是通过!doctype定义,如下,是一个html4.0的过渡DTDhtml文档:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

或在html5中:
<!doctype html>

document.documentElement与document.body

  • document代表的是整个文档(对于一个网页来说包括整个网页结构),
  • document.documentElement是整个文档节点树的根节点,在网页中即html标签;
  • document.body是整个文档DOM节点树里的body节点,网页中即为body标签元素。

我们常看见如下这种写法获取页面滚动条滚过的长度:
//在ios里用的是body.scrollTop

var top = document.documentElement.scrollTop || document.body.scrollTop;
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;