Infinite Scrolling without ajax using jquery? [closed]

问题

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 6 years ago.

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?

回答1:

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

Hope this helps.

来源：https://stackoverflow.com/questions/20042121/infinite-scrolling-without-ajax-using-jquery