一直对ScrollTop、ScrollHeight、ClientHeight、OffsetHeight这些内容傻傻分不清楚，看了还会忘，今天写触底加载更多的时候又用到了，还是整理下来，捋清楚知识点比较好。
一、基本概念
1、偏移量 offset dimension**
描述：包括元素在屏幕上占用的所有可见的空
读写：只读
offsetHeight:元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。
offsetWidth:元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度
offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。
2、客户区大小 client dimension
描述：元素内容及其内边距所占据空间大小
读写：只读
clientWidth: 元素内容区宽度加上左右内边距宽度
clientHeight: 元素内容区高度加上左右内边距高度
客户区的定义就是元素内部的空间大小，因此不包括滚动条占用的空间
要确定浏览器的视口大小，可以使用document.documentElement或document.body的clientWidth和clientHeight
3、滚动大小 scroll dimension
描述：包含滚动内容的元素大小
scrollHeight:在没有滚动条的情况下，元素内容的总高度。 scrollWidth:在没有滚动条的情况下，元素内容的总宽度。 scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollWidth 和 scrollHeight 主要用于确定元素内容的实际大小
二、加载更多
基于按钮加载更多其实比较简单，我们这里主要结合dom知识说说滚动加载更多
核心内容有两点：
1、给滚动元素增加事件监听
2、判断ele.clientHeight+ele.scrollTop与ele.scrollHeight的大小就可以了
在简书上发布相关文章是对自己不断学习的激励；如有什么写得不对的地方，欢迎批评指正；给我点赞的都是小可爱^_^
