实际项目中的滚动条操作

添加滚动条是在限定宽高且实现内容溢出容器的情况下，添加  overflow : auto  这个css属性实现添加的，当然默认的滚动条样式可能并不符合实际的项目需求，可以通过更改属性实现滚动条样式变化。

滚动条实现（右侧为实现样式）

今天讲在实际的应用中，通过滚动条实现内容懒加载，当页面滚动条上侧（or 下侧）到达容器顶部（or 底部），前端再次请求后端数据，实现页面数据的懒加载。在开始之前，先明白几个基本的概念：scrollHeight, clientHeight, offsetHeight, scrollTop。

---

scrollHeight: 在没有滚动条的情况下，元素内容的总高度。

clientHeight: 元素内容区高度加上上下内边距高度。

offsetHeight: 元素在垂直方向上占用的空间大小，包括元素的高度，水平滚动条的高度，上边框以及下边框的高度。

scrollTop: 被隐藏在内容区域上方的像素数，通过设置此值可以改变懒加载数据添加之后滚动条的位置。  

1. 实际应用如聊天纪录等，滚动条通过到达容器底部实现懒加载更新数据，此时只需判断scrollTop的值是否为0即可判断是否滚动条到达顶部，代码如下：

滚动条实现懒加载&&滚动条位置控制

2. 同时也有需求，是要通过实现滚动条到底部完成数据请求，实现懒加载的。因为滚动条头部距离容器顶部的距离scrollTop就是文本本身的高度减去容器的高度，所以判断滚动条到底部的条件就是：滚动条头部距离容器顶部的距离+元素在垂直方向上占用的空间大小 >= 元素内容的总高度。代码如下：

滚动条实现懒加载

由于浏览器默认行为，底部懒加载无须考虑加载数据之后的滚动条位置~

next....