【javascript】clientHeight，offsetHeight，scrollHeight，scrollTop的理解，以及触底函数

1、clientHeight
含义：元素的像素高度，包含元素的高度+内边距，不包含水平滚动条，边框和外边距

图示：

2、offsetHeight
含义：元素的像素高度包含元素的垂直内边距和边框，水平滚动条的高度，且是一个整数

图示：

3、scrollHeight
含义：元素内容的高度，包括溢出的不可见内容

图示：

4、 scrollTop
含义：元素滚动到屏幕上面不可见区域高度

通常使用 clientHeight+ scrollTop >= scrollHeight 来判断是否触底。

window.addEventListener("scroll", ()=>{let scrollTop = document.documentElement.scrollTop;let clientHeight = document.documentElement.clientHeight ;let scrollHeight= document.documentElement.scrollHeight;// console.log("距离顶部高度", scrollTop);// console.log("可视区域高度", clientHeight );// console.log("滚动高度高度", scrollHeight);if(scrollTop + clientHeight + 50 > scrollHeight){// 距离底部50开始加载if(!this.shakeStatus){this.shakeStatus = true;setTimeout(()=>{if(this.shakeStatus){this.shakeStatus = false;}}, 3000)if(this.getEarningsValue.total > this.earningsLists.length){this.getEarningsValue.page++this.getEarningsDetail()}}}else{if(this.shakeStatus){this.shakeStatus = false;}}})
},

【javascript】clientHeight，offsetHeight，scrollHeight，scrollTop的理解，以及触底函数相关推荐

clientHeight offsetHeight scrollHeight offsetTop scrollTop
文章目录各属性详解实现 offsetParent.offsetLeft/offsetTop深度剖析 element.offsetParent 定义祖先元素中不存在定位元素 webkit内核.Fi ...
offsetTop,offsetHeight,scrollHeight,scrollTop的区别
offsetTop,offsetHeight,scrollHeight,scrollTop,这些属性曾经困扰了我很长很长很长时间. 今天花点功夫,彻底把他们搞清楚了. 假设 obj 为某个 HTML ...
clientHeight.offsetHeight.scrollHeight等的区别
查看了博文http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html 然后自己写一下加深印象. clientHeight:可见高度 ...
clientHeight,offsetHeight,scrollHeight迷一样的三个值
https://blog.csdn.net/qq_39083004/article/details/78498178 https://www.imooc.com/article/17571 推荐 o ...
js中 scrollHeight、clientHeight、scrollTop的理解
前段时间,自己手写了一个滚动触底加载数据的功能.当时由于时间紧迫,所以也就只是在网上找了一段代码贴上去.也没有很深入的去研究.今天有空,所以自己特意去研究了下它的原理. 滚动触底加载数据,之前我也有写 ...
关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script>window.addEventListener('DOMContentLoaded',function(){var no ...
scrollHeight、clientHeight、offsetHeight、 scrollTop
由于需要实现下拉分页加载,所以对scrollHeight.clientHeight.offsetHeight. scrollTop做些简单总结. 一.scrollHeight.clientHeight ...
clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系
style.height 包括元素的滚动条,不包括边框 clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeight o ...
关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别
二.也是平时经常用到的offsetheight 它返回的高度是内容高+padding+边框,但是注意哦,木有加margin哦,当然一般也木有啥需要把margin加进去的,以上代码为例,结果显示上图h2 ...

【javascript】clientHeight，offsetHeight，scrollHeight，scrollTop的理解，以及触底函数

【javascript】clientHeight，offsetHeight，scrollHeight，scrollTop的理解，以及触底函数相关推荐

最新文章

热门文章