【平常总结】scrollTop、scrollHeight与clientHeight的重要关系

前言

　　在作一个需求的时候涉及懒加载，百度了一下，发现scrollTop、scrollHeight与clientHeight这三个元素起到了重要做用，之前作过相似demo可是时间过过久忘记了，如今已经彻底分不清这个三个属性的区别，如今再从新复习一下

 

1、scrollTop

　　定义：获取或设置元素的内容向上滚动的像素值

　　特色：1.未设置时默认为0

　　　　   2.为负值时不作任何响应

　　　　　3.设置为超出自己最大值时，默认为最大值

 

2、clientHeight

　　定义：clientHeight = CSS height + CSS padding + 水平滚动条的高度

　   

3、scrollHeight

　　定义：只读属性是一个元素的所含的高度的测定，包括因为溢出内容在屏幕上不可见的。

　　DEMO

       

 

4、scrollTop、scrollHeight与clientHeight的重要关系

　　关系公式：element.scrollHeight - element.scrollTop === element.clientHeight

　　解释：此公式能够用于判断是否滚动到底

 

5、应用

　　这个公式我用于了数据的懒加载，在滚动到底部的时候请求接口获取数据。

  

参考资料：

MDN https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight