使用jquery在没有ajax的情况下无限滚动？

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

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

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

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();
    }
});

var$doc=$（文档）；
var$win=$（窗口）；
//隐藏一切不受约束的东西
$（'.scrollable data'）.filter（函数（索引）{
返回（$（this.scrollTop（）>$doc.height（））；
}).hide（）；
var数据_增量=5；
$（窗口）。滚动（函数（）{
//测试是否在底部
如果（$doc.height（）-$win.height（）-$（this.scrollTop（）==0）{
//显示（5）下一个隐藏的数据标记
$（'.scrollable data:hidden:lt（'+data_INCREMENT+'））.show（）；
}
});

---

希望这有帮助。

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

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

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();
    }
});

var$doc=$（文档）；
var$win=$（窗口）；
//隐藏一切不受约束的东西
$（'.scrollable data'）.filter（函数（索引）{
返回（$（this.scrollTop（）>$doc.height（））；
}).hide（）；
var数据_增量=5；
$（窗口）。滚动（函数（）{
//测试是否在底部
如果（$doc.height（）-$win.height（）-$（this.scrollTop（）==0）{
//显示（5）下一个隐藏的数据标记
$（'.scrollable data:hidden:lt（'+data_INCREMENT+'））.show（）；
}
});

---

希望这能有所帮助。

是的。使用

$（window.scroll（）

你说的“不使用ajax”是什么意思？如果你不需要ajax，只需加载整个页面。@VahidND我将检索和加载的数据存储在本地数据库（Websql）中。.如果有100个数据，则单次加载会花费更多的时间。这就是我尝试在没有ajax的情况下无限滚动的原因。是的。使用

$（window.scroll（）

你说的“不使用ajax”是什么意思？如果你不需要ajax，只需加载整个页面。@VahidND我在本地数据库（Websql）中存储了我正在检索和加载的数据。。如果有100个数据，则单次加载会花费更多时间。这就是我在没有ajax的情况下无限滚动的尝试。