标签：jquery 滚动 高度 height 滚动条 操作 scrollTop 数据 加载
在开发项目时，常常需要展示大量数据。如果全部显示出来，数据相对少时，看不出来什么不同，如果数据很多时，一次请求全部显示，这就相当可怕了。
面对这种问题，PC里使用了分页效果，将数据分成一页页，换页时请求当前页数据，
而屏幕较小的移动端，分页就不怎么好看了，常用的方法是滚动到底部时继续加载数据
滚动加载其实也是一种分页，只是不使用页码而已。
（一）、滚动事件的效果和原理
效果： 滚动到当前页的底部时，会转圈圈缓冲加载下一页的数据，完成后滚动区域和内容增加，以此类推；
原理： 3个数据（滚动视窗高度，滚动内容总高度， 当前已滚距离），
1个临界（滚动内容总高度 = 当前已滚距离 + 滚动视窗高度）
1.获取滚动视窗高度：(window).height()；（如果滚动区域不是整个页面，使用(‘slector’).height()）
2.获取滚动内容总高度：$(this).get(0).scrollHeight
3.当前已滚距离：$(this).scrollTop()
（二）、scroll滚动事件：$(selector).scroll(function() {})
复制代码
function scrollFunc(){
$("#container").scroll(function(){
var $this =$(this),
viewH =$(this).height(),//可见高度
contentH =$(this).get(0).scrollHeight,//内容高度
scrollTop =$(this).scrollTop();//滚动高度
if(contentH = viewH + scrollTop) { //当滚动到底部时，
}
if(contentH - viewH - scrollTop <= 100) { //当滚动到距离底部100px时,
}
if(scrollTop/(contentH -viewH) >= 0.95){ //当滚动到距离底部5%时
// 这里加载数据..
}
});
}
标签：jquery,滚动,高度,height,滚动条,操作,scrollTop,数据,加载 来源： https://blog.csdn.net/weixin_44021910/article/details/94746693
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。