移动端滚动加载-----jQuery 和原生JS

Rattenking

发布于 2021-01-29 15:52:50

22.2K0

发布于 2021-01-29 15:52:50

文章被收录于专栏：RattenkingRattenking

判断滚动条到底部，需要用到DOM的三个属性值，使用jQuery分别是：

$('body').scrollTop()为滚动条在Y轴上的滚动距离。

$(window).height()为内容可视区域的高度。

$('body').height()为内容可视区域的高度加上溢出（滚动）的距离。

从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为('body').scrollTop() +(window).height() ==

1.绑定滚动监听事件

$(window).bind('scroll',isScrollBottom);

2.判断滚动条已滚动到底部

$('body').height() - $('body').scrollTop() - $(window).height() < 10

3.进入判断首先解除（防止进行多次ajax请求）

 $(window).unbind('scroll',isScrollBottom);

4.返回数据，渲染到页面并再次绑定监听事件

$(window).bind('scroll',isScrollBottom);

如果没有返回数据，提示‘没有更多商品’。

var isScrollBottom = function(){
        if($('body').height() - $('body').scrollTop() - $(window).height() < 10){
            //解除滚动监听绑定事件
            $(window).unbind('scroll',isScrollBottom);
            //ajax请求代码
	    //ajax的成功函数
	    success:function(data){
		if(data.length > 0){
			//将数据渲染到页面
			
			
			$(window).bind('scroll',isScrollBottom);
		}else{
			alert('没有更多产品啦！');
		}
	    }


            //重新启动滚动监听事件，放入ajax成功函数的最后执行
	    //如果再次绑定未在ajax中执行，则可以在ajax过后进行延迟绑定
            //setTimeout(function(){$(window).bind('scroll',isScrollBottom);},2000);
        }
    }
    $(window).bind('scroll',isScrollBottom);

原生JS：scrollTop、clientHeight、scrollHeight

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。

从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

1.滚动条在Y轴上的滚动距离

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;
}

2.文档的总高度

function getScrollHeight(){
　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
　　if(document.body){
　　　　bodyScrollHeight = document.body.scrollHeight;
　　}
　　if(document.documentElement){
　　　　documentScrollHeight = document.documentElement.scrollHeight;
　　}
　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
　　return scrollHeight;
}

3.浏览器视口的高度

function getWindowHeight(){
　　var windowHeight = 0;
　　if(document.compatMode == "CSS1Compat"){
　　　　windowHeight = document.documentElement.clientHeight;
　　}else{
　　　　windowHeight = document.body.clientHeight;
　　}
　　return windowHeight;
}

4.对window绑定监听事件

window.addEventListener('scroll',isScrollB0ttom ,false);
var isScrollB0ttom = function(){
　　if(getScrollHeight() - getScrollTop() - getWindowHeight() < 10){
		//解除绑定
		window.removeEventListener('scroll',isScrollB0ttom ,false);
//ajax数据请求
		//数据渲染后再次绑定监听事件window.addEventListener('scroll',isScrollB0ttom ,false);
　　}
};

注意： 1.每次满足滑动到底部进入判断先解除监听事件； 2.每次加载数据渲染完后，必须再次绑定监听事件； 3.判断触发条件使用一个小的范围。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-06-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery