1.使用场景:
滚动到屏幕底部,触发加载分页数据请求(qq空间,手机端)
2.代码实现
javascript方式
window.onscroll = function() {
//获取被卷去高度
var scrollTop = document.body.scrollTop;
//获取窗口高度(可见区域高度)
var windowHeight = document.documentElement.clientHeight;
//获取文档高度
var documentHeight = document.body.scrollHeight;
if (scrollTop + windowHeight >= documentHeight) {
$('#nomore').show();
//发送Ajax请求获取分页数据
}
}
jQuery方式
$(window).scroll(function() {
//获取被卷去高度
var scrollTop = $(this).scrollTop();
//获取窗口高度(可见区域高度)
var windowHeight = $(this).height();
//获取文档高度
var documentHeight = $(document).height();
if (scrollTop + windowHeight >= documentHeight) {
$('#nomore').show();
//发送Ajax请求获取分页数据
}
});
区别:javascript的onscroll事件只能定义一次,而jQuery的scroll事件可以定义多次,还不会冲突。
写在最后
哪位大佬如若发现文章存在纰漏之处或需要补充更多内容,欢迎留言!!!