由于需要实现下拉分页加载,所以对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}})}
参考:/p/d267456ebc0d