dom元素的大小及触底加载更多

一直对ScrollTop、ScrollHeight、ClientHeight、OffsetHeight这些内容傻傻分不清楚，看了还会忘，今天写触底加载更多的时候又用到了，还是整理下来，捋清楚知识点比较好。

一、基本概念

1、偏移量 offset dimension**

描述：包括元素在屏幕上占用的所有可见的空
读写：只读

offsetHeight:元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。

offsetWidth:元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度

offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。

1.png

2、客户区大小 client dimension

描述：元素内容及其内边距所占据空间大小
读写：只读

clientWidth: 元素内容区宽度加上左右内边距宽度

clientHeight: 元素内容区高度加上左右内边距高度

2.png

客户区的定义就是元素内部的空间大小，因此不包括滚动条占用的空间

要确定浏览器的视口大小，可以使用document.documentElement或document.body的clientWidth和clientHeight

3、滚动大小 scroll dimension

描述：包含滚动内容的元素大小

scrollHeight:在没有滚动条的情况下，元素内容的总高度。 scrollWidth:在没有滚动条的情况下，元素内容的总宽度。 scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollWidth 和 scrollHeight 主要用于确定元素内容的实际大小

3.png

二、加载更多

基于按钮加载更多其实比较简单，我们这里主要结合dom知识说说滚动加载更多
核心内容有两点：
1、给滚动元素增加事件监听
2、判断ele.clientHeight+ele.scrollTop与ele.scrollHeight的大小就可以了

在上发布相关文章是对自己不断学习的激励；如有什么写得不对的地方，欢迎批评指正；给我点赞的都是小可爱^_^