思路:
滚动条头部距离顶部的距离加上,滚动套自身的高度等于整个页面的高度
滚动条高度(即可视窗口的高度)
let clientHeight = document.documentElement.clientHeight
滚动条头部距离顶部的高度
let scrollTop = document.documentElement.scrollTop
整个页面的高度(包括溢出看不见的高度)
let scrollHeight = document.documentElement.scrollHeight
实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style></style>
</head>
<body>
<ul>
<!-- 100个li -->
</ul>
<script>
function debounce (method, delay) {
let timer = null
return function () {
let self = this
let args = arguments
clearTimeout(timer)
timer = setTimeout(() => {
method.apply(self, args)
}, delay)
}
}
function addData () {
const ul = document.getElementsByTagName('ul')[0]
for (let index = 0; index < 10; index++) {
let li = document.createElement('li')
li.innerHTML = 1
ul.appendChild(li)
}
}
window.onscroll = debounce(function () {
// 可视区域的高度加上溢出的高度相当于页面总高度
let scrollHeight = document.documentElement.scrollHeight
// 滚动头部距离顶部的高度
let scrollTop = document.documentElement.scrollTop
// 整个可视区域的高度(眼见的滚动条高度就是整个窗口可视区域的高度,窗口有多高,滚动条就有多高)
let clientHeight = document.documentElement.clientHeight
console.log(scrollHeight, scrollTop, clientHeight)
// 当滚动条到达底部时
if (clientHeight + scrollTop === scrollHeight) {
console.log('到底了,数据加载中')
setTimeout(() => {
addData()
console.log('数据加载完成')
}, 1000)
}
}, 200)
</script>
</body>
</html>