本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件。首先理解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。
首先理解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。
clientHeight：这个元素的高度，占用整个空间的高度，所以，如果一个div有滚动条，那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。
offsetHeight：是指元素内容的高度。依照上面的，那这个高度呢就是DIV内部的高度，包括可见部分及以滚动条下面的不可见部分。
scroll
在JavaScript和jQuery的世界里，处理页面滚动事件是一个常见的需求，特别是在构建动态加载内容的网页时。本篇文章将深入探讨如何使用jQuery来判断滚动条是否滚动到页面底部，并在此基础上执行特定的事件。我们需要了解三个关键的DOM元素属性：clientHeight、offsetHeight和scrollTop。
1. **clientHeight**：
clientHeight属性表示一个元素在视口中的可视高度，不包括滚动条。如果一个元素有滚动条，clientHeight仅返回元素本身的可见部分的高度。
2. **offsetHeight**：
offsetHeight则包含了元素的总高度，包括可见部分以及滚动条下面不可见的内容。它是元素内容、内边距、边框和（如果有）垂直滚动条的总和。
3. **scrollTop**：
scrollTop属性指示了一个元素的滚动条在垂直方向上已经滚动了多少像素。它的取值范围是从0（滚动条位于顶部）到offsetHeight - clientHeight（滚动条滚动到底部）。
要判断滚动条是否滚动到底部，我们可以利用这三个属性的关系。当滚动条滚动到最底端时，scrollTop的值应该等于offsetHeight减去clientHeight的差值。因此，可以编写如下代码来检测这个条件：
```javascript
$(window).scroll(function() {
var windowHeight = $(window).height(); // 获取视口高度
var documentHeight = $(document).height(); // 获取文档总高度
var scrollTop = $(window).scrollTop(); // 获取当前滚动条位置
if (scrollTop + windowHeight >= documentHeight) {
// 滚动条已滚动到页面底部，执行相应操作
// ...
}
});
```
若要判断滚动条距离底部还有50px或5%时触发事件，可以稍微修改上述条件：
```javascript
$(window).scroll(function() {
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var scrollTop = $(window).scrollTop();
if (scrollTop + windowHeight >= documentHeight - 50) {
// 滚动条距离底部50px以内，执行操作
// ...
} else if (scrollTop / (documentHeight - windowHeight) >= 0.95) {
// 滚动条距离底部5%以内，执行操作
// ...
}
});
```
对于一个特定的DOM元素，如一个id为`contain`的div，可以这样处理：
```javascript
$("#contain").scroll(function() {
var viewH = $(this).height(); // 可见高度
var contentH = $(this).get(0).scrollHeight; // 内容高度
var scrollTop = $(this).scrollTop(); // 滚动高度
if (scrollTop / (contentH - viewH) >= 0.95) {
// 到达底部100px时, 加载新内容
// 在这里加载数据...
}
});
```
以上代码示例展示了如何监听滚动事件，并根据滚动条的位置触发不同的处理逻辑。在动态加载内容的场景中，这通常用于实现无限滚动或分页加载。通过这种方式，你可以优化用户体验，只在用户接近或达到页面底部时加载更多数据，减少一次性加载大量内容对网络带宽和浏览器性能的影响。在实际项目中，可以结合API请求、数据缓存等策略来进一步完善这个功能。
