使用jquery没有ajax的无限滚动？ [关闭]答案

【问题标题】：Infinite Scrolling without ajax using jquery? [closed]使用jquery没有ajax的无限滚动？ [关闭]
【发布时间】：2013-11-18 16:19:05
【问题描述】：

我想在 jquery 移动 web 应用程序中创建无限滚动。我想在不使用 ajax 的情况下滚动页面。有没有可能做到这一点？

【问题讨论】：

是的，有。使用$(window).scroll()
“不使用 ajax”是什么意思？如果您不想要 ajax，只需加载整个页面。
@VahidND 我将数据存储在本地数据库（Websql）中，我从中检索和加载..如果有 100 个数据，单次加载需要更多时间。这就是我正在尝试无限没有 ajax 的滚动。

标签： jquery html jquery-mobile web-sql

【解决方案1】：

如果您的数据不是真正无限的，您可以将所有内容存储在页面中并显示需要显示的内容。

例如（未测试，但给你一个想法）：

HTML

<div class="scrollable-data"><!-- ... --></div>
<div class="scrollable-data"><!-- ... --></div>
<div class="scrollable-data"><!-- ... --></div>
<div class="scrollable-data"><!-- ... --></div>

jQuery

var $doc=$(document);
var $win=$(window);

// hide everything that is out of bound
$('.scrollable-data').filter(function(index){
    return ($(this).scrollTop() > $doc.height());
}).hide();

var DATA_INCREMENT=5;

$(window).scroll(function(){
    // test if at the bottom
    if ($doc.height()-$win.height()-$(this).scrollTop() == 0) {
        // show the <DATA_INCREMENT> (5) next hidden data tags
        $('.scrollable-data:hidden:lt('+DATA_INCREMENT+')').show();
    }
});

希望这会有所帮助。

【讨论】：