今天稍微清闲点，想起了前几天项目中遇到的问题，在页面position定位的内容里实现滚动加载更多，之前写了滚动加载更多是没有定位，通过window.onscroll()方法触发，现在的这个需求有些不一样，这里记录一下方便以后参考，下面直接放上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<title>绝对定位内容上拉到底部加载更多</title>
</head>
<style>
body,header,main,article,footer,p {
margin: 0;
padding: 0;
}
header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
box-shadow: 0 0 5px #ccc;
text-align: center;
}
main {
position: absolute;
top: 50px;
bottom: 50px;
left: 0;
right: 0;
overflow-y: auto;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
box-shadow: 0 0 5px #ccc;
text-align: center;
}
article {
background: #00b7ee;
}
</style>
<body>
<header>
头部
</header>
<main>
<article>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</article>
</main>
<footer>
底部
</footer>
<script>
(function(){
const winH = document.querySelector('main').clientHeight; //页面可视区域高度
console.log(winH);
let noData = false; // 如果没有数据设置为 true，有数据则为 false
//定义鼠标滚动事件
document.querySelector('main').addEventListener('scroll',scrollFun);
function scrollFun () {
const pageH = document.querySelector('body').clientHeight;
const scrollT = document.querySelector('main').scrollTop; //滚动条top
const articleH = document.querySelector('article').clientHeight; //滚动内容高度
// 滚动到了底部 减20是为了不用彻底滑到底部就触发方法
if (articleH - 20 <= -(pageH - winH - scrollT)) {
console.log('滚动到了底部');
for (let x = 0; x < 12; x++) {
document.querySelector('article').innerHTML += '<p>' + x + '</p>';
}
document.querySelector('main').removeEventListener('scroll', scrollFun);
console.log('scrollFun');
if (!noData) {
setTimeout(function () {
document.querySelector('main').addEventListener('scroll',scrollFun);
console.log('scrollFun');
}, 20);
// noData = true;
}
}
// 判断滚动内容距滚动的顶部距离，里面可以加入显示回到顶部等
if (scrollT >= 400) {
console.log('滚动到了可以显示回到顶部按钮');
} else {
}
}
})()
</script>
</body>
</html>