scrollHeight、clientHeight、offsetHeight、 scrollTop

由于需要实现下拉分页加载，所以对scrollHeight、clientHeight、offsetHeight、 scrollTop做些简单总结。
一、scrollHeight、clientHeight、offsetHeight具体指的是哪些范围？

scrollHeight—所有的内容（指左图中有文字的红色框框内）和内边距，这个内容包括肉眼看不见、溢出、被窗口遮挡的部分。
clientHeight—右图中视野内可见的内容和内边距，不包括x轴的滚动条高度、边框、外边距。
offsetHeight—右图中，在clientHeight的基础上，加上边框和滚动条的高度。

二、scrollTop
滚动条滚动了多少距离（包括之前已滚动过的隐藏内容）就是scrollTop。
三、代码监听是否需要下拉加载更多

const WrapperDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
if (WrapperDom) {WrapperDom.addEventListener('scroll', function () {console.log(this.scrollHeight, this.scrollTop, this.clientHeight)const isAttachBottom = this.scrollHeight - this.scrollTop <= this.clientHeightif (isAttachBottom) {//xxxxx}})
}

参考：https://www.jianshu.com/p/d267456ebc0d

scrollHeight、clientHeight、offsetHeight、 scrollTop相关推荐

html元素的 height、clientHeight和offsetHeight之间的区别
height:指元素内容的高度 ,jQuery中的height()方法返回的就是这个高度. clientHeight:内容高度+padding高度 ,jQuery中的innerHeight()方法 ...
scrollHeight、clientHeight、offsetHeight、scrollTop等的定义以及图解
开发中经常遇到使用scrollHeight.scrollTop.clientHeight.offsetHeight等的情况,网上有众多关于这些属性的解释,但是并不全面和直观,现在将这些属性结合图例整理 ...
CSS中clientHeight、offsetHeight、scrollHeight、scrollTop、scrollTo几者的区别和关联
怎么区分clientHeight.offsetHeight.scrollHeight.scrollTo.scrollTop呢,我们通过下面的示例来搞清楚. 现有如下示例: 对应css为 .div {w ...
Js——ScrollTop、ScrollHeight、ClientHeight、OffsetHeight汇总
一直对ScrollTop.ScrollHeight.ClientHeight.OffsetHeight这些内容傻傻分不清楚,今天整体下. scrollHeight scrollHeight含有scro ...
clientHeight、offsetHeight、scrollHeight、scrollTop
由于长时间对clientHeight.offsetHeight.scrollHeight.scrollTop这几个js-dom不理解,处于半迷糊状态,现在就仔仔细细实验整理一波,希望能做个总结,方便以 ...
clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight
clientWidth.clientHeight.offsetWidth.offsetHeight以及scrollWidth.scrollHeight是几个困惑了好久的元素属性,趁着有时间整理一下 1 ...
html5中的行高元素,详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理
关于元素的一些属性在前端的日常开发中,我们经常无可避免的需要获取或者监听一些页面的属性,那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性.特别是一下这些: 尺寸相关:offsetHeig ...
clientHeight、offsetHeight、scrollHeight问题
我们这里说说四种浏览器对 document.body 的 clientHeight.offsetHeight 和 scrollHeight 的解释,这里说的是 document.body,如果是 HT ...
四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异...
转自http://blog.163.com/chudaozhe@126/blog/static/1157323432011626112137928/ 网页可见区域宽:document.body.cli ...

scrollHeight、clientHeight、offsetHeight、 scrollTop

scrollHeight、clientHeight、offsetHeight、 scrollTop相关推荐

最新文章

热门文章