【知识点详解】
本文主要介绍如何使用`scroll`事件在网页中实现监控滚动条，并结合`zepto.js`库进行分页显示。以下是对关键概念和技术的详细解释：
1. **scroll事件**：
`scroll`事件是浏览器原生提供的一种DOM事件，它会在用户滚动页面或某个可滚动元素时触发。通过监听`scroll`事件，我们可以知道用户何时滚动页面，从而执行相应的处理函数，例如加载更多数据。
2. **内容高度(contentH)**：
内容高度是指元素内所有内容（包括可见部分和不可见部分）的总高度。在本例中，`contentH`表示要滚动的元素（如一个包含购买记录的div）的全部内容高度。
3. **视口高度(viewH)**：
视口高度是用户当前能看到的元素的高度，不包括滚动条和超出视口的部分。在本例中，`viewH`表示用户在屏幕上看到的div的高度。
4. **滚动条距离顶部的距离(scrollTop)**：
`scrollTop`属性表示元素内容相对于其顶部的偏移量，当用户滚动时，这个值会改变。当用户滚动到底部时，`scrollTop`等于`contentH - viewH`。
5. **分页逻辑**：
当`scrollTop`加上`viewH`等于`contentH`时，意味着用户已经滚动到了元素的底部。这时，可以加载下一页的数据。利用`Math.ceil()`计算总页数，然后通过`ajax`请求获取数据，动态添加到页面中。
6. **zepto.js分页**：
Zepto.js 是一个轻量级的JavaScript库，类似于jQuery，适用于移动端。在本示例中，使用Zepto的`$(this).scrollHeight`获取元素的总高度，`$(this).scrollTop()`获取滚动条的位置，以及`$(this).height()`获取元素的可视高度。
7. **加载数据和埋点统计**：
使用`$.ajax`发送异步请求获取数据，`load_records`函数负责将新加载的数据添加到页面。同时，配合`hxmClickStat`和`hxmScrollBottomStat`进行点击和滚动到底部的埋点统计，用于分析用户行为和页面性能。
8. **优化和防止重复执行**：
为了避免在页面底部时反复加载数据，可以设置一个`load`变量来跟踪当前加载的页数。当加载最后一页时，通过`else`分支防止额外的加载操作，同时发送对应的埋点事件。
总结，本文介绍了一个基于`scroll`事件和`zepto.js`实现的分页加载策略，通过监听滚动条位置，当用户滚动到页面底部时动态加载更多内容。同时，结合埋点统计，可以对用户行为进行跟踪和分析，这对于提升用户体验和优化页面性能至关重要。
