element.scrollHeight：元素内容高度的度量（包括由于溢出导致的视图中不可见的内容）

element.clientHeight：元素内部的高度（包括内边距，但是不包括水平滚动轴与边距和外边距）

element.scrollTop：获取或者设置一个元素的内容垂直滚动的像素数。

2. 判断一个元素是否滚动到底

element.scrollHeight - element.scrollTop === element.clientHeight;

3.触底下拉加载更多

if (element.scrollTop >= element.scrollHeight - element.clientHeight) { ... }

4. 绑定事件

window.onscroll = load;

<ul class="list-ul"><li class="list-item">1</li><li class="list-item">2</li><li class="list-item">3</li><li class="list-item">4</li><li class="list-item">5</li><li class="list-item">6</li><li class="list-item">7</li><li class="list-item">8</li><li class="list-item">9</li><li class="list-item">10</li>
</ul>

const vHeight = document.documentElement.clientHeight
const listUl = document.getElementsByClassName('list-ul')
let i = 10
let isLoading = false
let timeIdfunction load(params) {const pHeight = document.documentElement.scrollHeightconst sTop = document.documentElement.scrollTopconsole.log(listUl);if (sTop >= pHeight - vHeight) {if (isLoading) {clearTimeout(timeId)return}if (i === 50) {return false}isLoading = truetimeId = setTimeout(() => {i++const str = `<li class="list-item">${i}</li><li class="list-item">${i}</li>...`listUl[0].innerHTML += strisLoading = false}, 1000)}
}

5. angular6中使用下拉加载更多

<ul  #resultList class="search-result-list-box" (scroll)="scrollChange($event)"><li class="search-result-item" *ngFor="let item of lowyerList;index as i" [id]="'lawyer' + i">...</li>
</ul>

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';export class AdvanceSearchComponent implements OnInit {@ViewChild('resultList') resultList: ElementRef;// 监听数据列表滚动距顶高度scrollChange($event) {const scrollTop = $event.target.scrollTop;  // 页面滚动的距离...}
}