滚动条滑动加载

一.基础知识

滚动元素的滚动距离 $(dom).scrollTop()

滚动元素的窗口高度 $(dom).innerHeight() 

滚动元素的内容实际高度 $(dom).prop('scrollHeight')

二.原理

当 滚动距离 + 窗口高度 >= 实际内容高度 - 调整值 时，发起ajax请求获取下一页的数据，append上去

三.代码

<script type="text/javascript">
	function appendLines(addLines) {
		lines = addLines || 50;
		var contentStr = '';
		for (let i=0; i< lines; i++) {
			contentStr += '<li>我是第 '+ (i + 1) +' 行</li>';
		}
		$('.wrapper').append(contentStr);
	}
	$(function(){
		appendLines(50);
		
		// $('.wrapper').scroll(function(){
		// 	console.log('.wrapper scroll event...');
		// });
		$('.wrapper').on('scroll', function(){
			var scrollTop = $(this).scrollTop();
			var innerHeight = $(this).innerHeight();
			var contentHeight = $(this).prop('scrollHeight');
			console.log('scrollTop == ' + scrollTop + '  innerHeight == ' + innerHeight);
			if (scrollTop + innerHeight >= contentHeight - 10) {
				//加载新的内容
				appendLines(50);
			}
		})
	});
</script>

四.效果