For*_*rza 5 javascript jquery infinite-scroll
我正在尝试让此无限加载脚本在我的项目中工作。
这是我的HTML：
<!-- Contents -->
<div id="page-container">
<div id="scroller">
<div id="page_1" class="pagina"></div>
<div id="page_2" class="pagina"></div>
<div id="page_3" class="pagina"></div>
<div id="page_4" class="pagina"></div>
<div id="page_5" class="pagina"></div>
<div id="page_6" class="pagina"></div>
</div>
</div>
<div id="pages-to-load">
<div id="page_7" class="pagina"></div>
...
<div id="page_25" class="pagina"></div>
</div>
这是脚本：
function scrollalert(){
var pages = document.getElementById("scroller").getElementsByTagName("div");
var currentPageId = pages[pages.length - 1];
//console.log("currentPageId is: "+currentPageId);
var scrollbox = document.querySelector('#page-container');
var scrolltop = $(window).scrollTop();
var scrollheight = scrollbox.scrollHeight;
var windowheight = $(window).height();
var scrolloffset=20;
console.log(scrolltop);
console.log(scrollheight);
console.log(windowheight);
console.log(scrollheight-(windowheight+scrolloffset));
if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) {
//fetch new items
console.log("loading more pages");
(function() {
alert('test');
var i;
var pagesToLoad = $("#pages-to-load > div").size();
for (i = 0; i < pagesToLoad; i++) {
console.log(pagesToLoad[i].id);
$.get(pagesToLoad[i].id, function(newitems){
alert('get new page');
$('#scroller').append(newitems);
updatestatus();
})
};
})();
};
}
无论我尝试什么，我似乎都无法加载和附加新页面。另外，当向下滚动时，我的scrollTop和scrollHeight不会改变。我确定我这里缺少明显的东西。另外我的要加载的页面未定义吗？
这是我的一个使用 JQuery 的无限滚动脚本，它可以工作：
网址：
<html>
<head>
<title>Scroll Troll Page</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="scrollbox">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</body>
<script type="text/javascript">
$(window).scroll(function () {
//- 10 = desired pixel distance from the bottom of the page while scrolling)
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
var box = $("#scrollbox");
//Just append some content here
box.html(box.html() + "<br /><br /><br /><br /><br /><br /><br />");
}
});
</script>
排队：
box.html(box.html + "Place content to expand here");
您可以在滚动时到达页面底部时添加应添加到容器中的内容。
工作jsFiddle：
| 归档时间： |
|
| 查看次数： |
5811 次 |
| 最近记录： |