无限滚动没有使用jQuery的ajax? [英] Infinite Scrolling without ajax using jquery?

问题描述

我想在jquery移动Web应用程序中创建无限滚动.我想在不使用ajax的情况下滚动页面.是否有可能这样做?

I want to create infinite scroll in jquery mobile web application.I want to scroll the page without using ajax.Is there any possibility to do that?

推荐答案

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

If your data isn't really infinite, you may store everything in the page and show the ones that needs to be shown.

例如(未经测试，但可以给您一个想法):

For example (not tested, but to give you an idea):

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

希望这会有所帮助.

这篇关于无限滚动没有使用jQuery的ajax?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！