<!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>
.box{
height: 2400px;
background-color: grey;
}
</style>
</head>
<body>
<div class="box">
</div>
<script>
/*
对于浏览器来说 整个文档得高度 = 卷去得高度 + 可视高度(浏览器得可是高度或者是盒子得offsetHeight)
*/
// 1.获取文档真实得总高度
function getHtmlScrollHeight(){
var bodyH = 0
var docH = 0
var scrollH = 0
if(document.body){
bodyH = document.body.scrollHeight
}
if(document.documentElement){
docH = document.documentElement.scrollHeight
}
// 一般不会，直接用docH作为总高度也行
scrollH = (bodyH - docH > 0) ? bodyH : docH;
return scrollH
}
// 2.获取浏览器视口得高度
function getWindowHeight(){
var windowH = 0
// document.compatMode
// BackCompat：标准兼容模式关闭。浏览器宽度:document.body.clientWidth；
// CSS1Compat：标准兼容模式开启。 浏览器宽度:document.documentElement.clientWidth。
// 判断一下模式
if(document.compatMode == "CSS1Compat"){
windowH = document.documentElement.clientHeight;
}else{
windowH = document.body.clientHeight;
}
return windowH
}
// 3.获取页面卷起得高度
function getScrollTop(){
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if(document.body){
bodyScrollTop = document.body.scrollTop;
}
if(document.documentElement){
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}
window.onscroll = function(){
if(getWindowHeight() + getScrollTop() === getHtmlScrollHeight()){
p = document.createElement('p')
p.innerText = '新增'
document.body.appendChild(p)
}
}
</script>
</body>
</html>
我没可以用这个来进行一些滚动到底部得操作，比如说加载数据
