<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Title</title>
</head>
<body>
<div>
<ul id="ulList"> </ul>
</div>
<script>
(function () {
window.onscroll=function(){
var windowH = document.documentElement.clientHeight;//网页可视区域高度
var documentH= document.documentElement.offsetHeight;//元素在屏幕上所用的所有可见区域的高度
var scrollH= document.documentElement.scrollTop; // 获取或设置一个元素的内容垂直滚动的像素数
console.log(windowH,documentH,scrollH)
console.log(windowH +scrollH)
if(windowH +scrollH>=documentH){
console.log("触底了")
}
}
})()
</script>
</body>
</html>
比较简单的写法，应该还有别的办法实现。虽然现在有很多框架也能实现同样的功能，但保不齐有时候会有变态的。。。。
先上代码比较粗鲁，但是思路是一样的：
-
文档高度
屏幕可视区的高度
-
可视窗口高度
浏览器可视区高度
-
滚动条滚动高度
滚动条下滑过的高度
文档高度 = 可视窗口高度 + 滚动条高度 时,滚动条正好到底.
