examples/intersectionObserve/paging.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style>
	ul,li{list-style:none;}
	li{
		height:100px;
		line-height:100px;
		border-bottom:1px solid #e2e2e2;
		text-align:center;
	}
	</style>
</head>
<body>
	<div id="wrap">
		<ul id="content"></ul>
		<div class="load-more">load more...</div>
	</div>
	<script src="../util.js"></script>
	<script>
		const content = document.getElementById('content');
		let page = 1, num = 1;
		loadMore(page);
		// // 传统
		// window.addEventListener('scroll', () => {
		// 	const innerHeight = util.innerHeight();
		// 	const scrollTop = util.scrollTop(); 
		// 	const scrollHeight = util.scrollHeight();
		// 	// 滚动到距离底部50px
		// 	if(innerHeight + scrollTop >= scrollHeight - 50) {
		// 		loadMore();
		// 	}
		// });
		// intersectionObserver
		const io = new IntersectionObserver((entrys) => {
			entrys.forEach((entry) => {
				if(!entry.isIntersecting) return;
				loadMore();
			})
		}, {
			rootMargin:'0px 0px 50px 0px'
		})
		//监听最底部的loadmore是否出现
		const lMore = document.querySelector('.load-more');
		io.observe(lMore);
		function loadMore() {
			const fragment = new DocumentFragment();
			for(let i=0;i<10;i++) {
				const li = document.createElement('li');
				li.innerHTML = `index-${num++}`;
				fragment.appendChild(li);
			}
			content.appendChild(fragment);
			page++;
		}
	</script>
</body>
</html>