重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
移动端html5如何判断是否滚动到底部并且下拉加载-创新互联
小编给大家分享一下移动端html5如何判断是否滚动到底部并且下拉加载，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联服务项目包括安图网站建设、安图网站制作、安图网页制作以及安图网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，安图网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到安图省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！如何判断滚动是否滚动到了底部?
首先要了解的知识scrollHeight,clientHeight,scrollTop
scrollHeight
只读属性,高度包括所有内容，包含内边距，但不把水平滚动条、边框和外边距算在内。
clientHeight
也是只读属性，没有定义CSS或者内联布局盒子的元素为0,它是元素内部的高度，包含内边距，不包括x轴的滚动条高度、边框、外边距;
同一种型号的手机上是不变的。
scrollTop
这个元素的顶部滚动距离(到视口(一般都是html)的顶部的距离)。
可以实现计算到底部的距离了
计算是否到达底部原生js
element.scrollHeight - element.scrollTop === element.clientHeight
jquery
element..scrollHeight - element.scrollTop() == element.height()
实现下拉刷新
用到的是html+jq
var loadingState = {
text:false,
image:false,
video:false
}
var httpUrl2 = "https://api.apiopen.top/getJoke"
var options1 = {
page:1,
count:10,
type:"text"
}
var options2 = {
page:1,
count:10,
type:"image"
}
var options3 = {
page:1,
count:10,
type:"video"
}
//在window里获取不到options,就只能把options放在data对象里，就能用data['options'+(index+1)]获取到了
var data = {
options1,options2,options3
}
//请求语句所在
loadingState.text = true;
textRender(options1);
//监听要滑动容器的滚动事件
$('.content').scroll(function(e){
var index = $(this).index();
//获取滚动的距离
var sTop = $('.content').eq(index).scrollTop();
//获取容器的高度
var contentHeight = $('.content').eq(index).height();
//获取滚动高度
var scrollHeight = $('.content').eq(index)[0].scrollHeight;
//根据所选的不同options加载不同的内容
if(index==$(this).index()&&loadingState.text!=true) {
//判断是否已经滚动底
if((sTop+contentHeight)==scrollHeight){
//当到达底部是加载选项为true,之后的操作
loadingState.text = true;
//内容缓慢淡出
$(this).animate({
scrollTop:sTop+80
},1000)
var options = data['options'+(index+1)];
//页数加一
options.page += 1;
//加载新获取的内容
textRender(options);
}
}
}
//加载实现函数
funtion textRender(obj){
//要添加的内容
if(obj == options1){
console.log(obj);
$.get(httpUrl2,obj).then(function(res){
res.result.forEach(function(item,i){
var html = `
${item.name}
发表于 ${item.passtime}
${item.text}