本文详解如何利用 JavaScript 获取 DOM 元素的 clientHeight、offsetHeight 和 scrollTop 属性，通过计算差值判断滚动条是否到达页面底部。文章提供了具体的数学公式及基于 jQuery 的代码示例，展示如何在滚动条距离底部特定像素或比例时自动加载内容。
理解 DOM 滚动相关属性
要判断滚动条是否触底，首先需要理解三个关键的 DOM 属性：clientHeight、offsetHeight 以及 scrollTop。
clientHeight 表示元素可视区域的高度，即占据整个空间的高度。如果元素包含滚动条，该数值不包含被滚动条遮挡的隐藏内容，仅反映元素本身的高度。
offsetHeight 指元素内容的实际总高度。它涵盖了可见部分以及通过滚动条才能看到的不可见部分，即元素内部内容的完整高度。
scrollTop 代表滚动条当前滚动的距离，可以理解为滚动条已经滑过的长度。
举例说明，假设一个 DIV 的高度为 400px（即 clientHeight 为 400），而其内部包含一个长列表，内容总高度为 1000px（即 offsetHeight 为 1000）。此时可见区域显示 400px，剩余 600px 内容不可见。这 600px 正是通过拉动滚动条才能显示的部分。当滚动条位于顶部时，scrollTop 为 0；当滚动条拉至最底部时，scrollTop 为 600。因此，scrollTop 的取值范围是 [0, 600]，这个最大值即为滚动条可滚动的总长度。
判断滚动条触底的逻辑
理解了上述概念后，判断滚动条是否到达底部就变得简单了。
在滚动过程中，变化的量是 scrollTop，其取值区间为 [0, (offsetHeight - clientHeight)]。也就是说，滚动条从顶部拉到底部的整个过程，scrollTop 的值始终在 0 到 (offsetHeight – clientHeight) 之间变化。
判断滚动条状态的常用逻辑如下： 1、判断滚动条是否滚动到最底端：scrollTop == (offsetHeight – clientHeight) 2、判断滚动条距离底部 50px 以内：(offsetHeight – clientHeight) – scrollTop <= 50 3、判断滚动条距离底部 5% 以内：scrollTop / (offsetHeight – clientHeight) >= 0.95
以上即为判断逻辑的核心。
滚动到底部自动加载的实现代码
若需实现滚动到底部自动加载内容的功能，只需注册一个滚动事件监听器即可。
具体代码如下：
scrollBottomTest = function(){
$("#contain").scroll(function(){
var $this = $(this),
viewH = $(this).height(), // 可见高度
contentH = $(this).get(0).scrollHeight, // 内容高度
scrollTop = $(this).scrollTop(); // 滚动高度
// if(contentH - viewH - scrollTop <= 100) { // 到达底部100px时,加载新内容
if(scrollTop/(contentH -viewH)>=0.95){ // 到达底部100px时,加载新内容
// 这里加载数据..
}
});
}PS：这里再为大家推荐一款关于JS事件的在线查询工具，归纳总结了JS常用的事件类型与函数功能：
javascript事件与功能说明大全：
http://tools.jb51.net/table/javascript_event