模拟QQ空间，滑动滚动条，自动加载数据。《模板》

最新推荐文章于 2021-06-24 11:35:29 发布

david_yellow

最新推荐文章于 2021-06-24 11:35:29 发布

阅读量1k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/tarenahuangdw/article/details/41868621

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近需要做一个QQ空间滑动滚动条，自动加载数据的功能。功能其实挺简单，使用异步加载数据的方式，当滑动滚动条，将后台数据添加到页面。。
这里有3个麻烦的地方：
1 scroll函数是比较敏感的。只要你稍微移动一下滚动条就出发事件了。。现实给人的感觉就是你点击一下滚动条就触发时间。让人很讨厌。。这里借鉴了一位朋友的思路
http://www.css88.com/archives/4646。它的思路就是加以个定时器来解决。

2 由于你新增数据的时候滚动条是会滑动的，它也会自动触发scroll事件。这里解决方案就是：加一个开关 isFinish..让没一次触发时间完成之后，再恢复触发功能。

3 关于像QQ空间那种，自动加载数据后，滚动条停留在原始刚刚滑动的位置。。这个看了网上很多朋友的计算方法。。最后我发觉，其实当页面新加载数据之后，滚动条会自动偏移到我们需要的位置。。所以，这个问题不存在。。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.8.3.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
var isFinish = true
$(window).scroll(function(){
if(!isFinish){
return;
}
isFinish = false;
setTimeout(function(){
var scrollTop = $(window).scrollTop();
addContent(scrollTop);
isFinish = true;
},1000);
});
});

function addContent(srollPos){
var main = $("#try");
main.append("<div style='height:"+500+"' >hello world"+srollPos+"---"+0+"</div>");
var mainHiht = main.height();
}
</script>
</head>
<body>
<div id="try">
<div id="follow" style="height:960px">this is a scroll test;<br/> 页面下拉自动加载内容</div>
</div>
</body>

</html>

这里我将经验贴出来跟大家共享一下。如果哪位朋友有更好的方案请指点，交流。