scrollHeight,clientHeight,scrollTop明晰

一、scrollHeight,clientHeight,scrollTop明晰

1、移动端加载数据时，由于数据太多，不会一次性全部加载出来。有些会采用pc端那样用分页码的形式，但是更多的确实滑动滚动条到内容最后，加载更多内容出来。一般引入了三方的前端框架和插件，基本都会有此功能。偶尔会需要采用原生js实现，故而此处就介绍下原生js的实现方式。另外附上jquery的实现方式。

2、 scrollHeight（文档内容实际高度，包括超出视窗的溢出部分）、

3、 scrollTop（滚动条滚动距离）、

4、 clientHeight（窗口可视范围高度）。

5、当 clientHeight+ scrollTop>= scrollHeight时，表示已经抵达内容的底部了，可以加载更多内容。

6、 JQuery获取三个高度和原生获取三个高度的方式：

二、js 如何获取浏览器的高度

1、网页可见区域宽： document.body.clientWidth

2、网页可见区域高： document.body.clientHeight

3、网页可见区域宽： document.body.offsetWidth(包括边线的宽)

4、网页可见区域高： document.body.offsetHeight(包括边线的高)

5、网页正文全文宽： document.body.scrollWidth

6、网页正文全文高： document.body.scrollHeight

7、网页被卷去的高： document.body.scrollTop

8、网页被卷去的左： document.body.scrollLeft

9、网页正文部分上： window.screenTop

10、网页正文部分左： window.screenLeft

11、屏幕分辨率的高： window.screen.height

12、屏幕分辨率的宽： window.screen.width

13、屏幕可用工作区高度： window.screen.availHeight

14、屏幕可用工作区宽度： window.screen.availWidth

三、js 或者 jquery 怎么得到滚动条

1、你的描述很不清楚，我只能认为元素位于浏览器正中位置了。因为对于滚动条只能获取它的scrollTop，那么只能在这个上面想办法。在这里你就要建立一个等式，四个参数，滚动条的scrollTop，window的height，目标元素的offerset.top和它自身的height。给window一个scroll事件，

2、通过验证上面所说的等式是否成立，执行你要的代码。

3、关键你要确定你的某个元素要在何时触发你的事件