srcollTop、clientHeight、scrollHeight详解

叁歲伎倆 2022-12-15 12:51 191阅读 0赞

原生js：

scrollTop  ——   滚动条滚动的距离（注意：不是滚动条距顶端的距离）
    scrollHeight —— 文档内容的实际高度，包含超出视图溢出的部分 
    clientHeight ——  窗口可视范围的高度

**当 `clientHeight + scrollTop >= scrollHeight` 时，表示已经抵达内容的底部了，可以加载更多内容。**

### scrollTop： ###

可以通过 window.pageYOffset 或  document.documentElement.scrollTop 来获取

### scrollHeight： ###

可以通过 document.documentELement.scrollHeight 或 document.bodyscrollHeight

### clientHeight: ###

可以通过 window.innerHeight 或 document.documentElement.clientHeight 来获取

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][]

### 下边这张图很清晰的说明了三者的表现： ###

![f7a9c6b34cbe4660b59e519b2b223b1e.png][]

**补充**

**与之对应的jQuery中三者的表达方式：**

$(document).height();  ==  document.documentElement.scrollHeight;    // 文档内容的实际高度
    $(window).scrollTop(); == document.documentElement.scrollTop;        // 滚动条滚动高度
    $(window).height(); == document.documentElement.clientHeight;        // 可视窗口高度

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: /images/20221123/bcdd88fe13114c069ba4720a3b85f3bd.png
[f7a9c6b34cbe4660b59e519b2b223b1e.png]: /images/20221123/a4226f84871c495fb442284f4e77e153.png