How to load a new page/url when user reach the bottom

问题

I am creating infinite load,means a new page gets loaded when user reach bottom of the page/particular div. Currently i have this code to load new page on click.

$("#about").click(function(){
    // load about page on click
        $("#response").load("about.html");
    });

Does anyone here have more clear idea of how to load new page without click/reaching a bottom

回答1:

You can send the ajax call based on mouse window position.

 var no=1;
    $(window).scroll(function () {
        if(no==1)
        {
            if ($(window).height() + $(window).scrollTop() == $(document).height()) {
                no=2;
                $.ajax({
                    type: "POST",
                    url: "about.html",
                    data: datas,
                    cache: false,
                    success: function(html){

                    }
                });
            }
        }
    });

This ajax call will call when a user reaches at end of page. You can specify a height at which it occurs.

回答2:

You want to use AJAX to load additional content as the user scrolls. I would recommend adding the additional content to they page they're already viewing (for instance, appending to the main div), rather than shifting them over to a different page. This will create a better user experience.

回答3:

Bind Scroll event with your scrollable content

$("#scrollableContent").scroll(function(){
    if($("#scrollableContent").position().top + $("#scrollableContent").height() == $(window).height()){
        //AJAX Call
      $("#response").load("about.html");
    }
});

回答4:

You can calculate the Div height + the scroll top position like:

var divHeight = ($("#about").height()+$("#about").scrollTop() ;

if this is greater or equal to the height of the table inside this Div, then that means the user reached the end of the Div. And you can load the page you wanted.

Note: You should have a table inside this Div.

来源：https://stackoverflow.com/questions/24307676/how-to-load-a-new-page-url-when-user-reach-the-bottom