Как загрузить новую страницу / URL, когда пользователь достигает дна

#javascript #jquery #ajax #infinite-scroll

#javascript #jquery #ajax #бесконечная прокрутка

Вопрос:

Я создаю бесконечную загрузку, это означает, что новая страница загружается, когда пользователь достигает нижней части страницы / конкретного раздела. В настоящее время у меня есть этот код для загрузки новой страницы по щелчку.

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

У кого-нибудь здесь есть более четкое представление о том, как загрузить новую страницу без щелчка / достижения дна

Ответ №1:

Вы хотите использовать AJAX для загрузки дополнительного контента по мере прокрутки пользователем. Я бы рекомендовал добавить дополнительный контент на страницу, которую они уже просматривают (например, добавление к основному div), а не переносить их на другую страницу. Это улучшит пользовательский интерфейс.

Ответ №2:

Scroll Событие привязки к вашему прокручиваемому контенту

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

Ответ №3:

Вы можете рассчитать высоту Div верхнюю позицию прокрутки, например:

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

если это больше или равно высоте таблицы внутри этого Div, то это означает, что пользователь достиг конца Div. И вы можете загрузить нужную страницу.

Примечание: у вас должна быть таблица внутри этого Div.

Ответ №4:

Вы можете отправить вызов ajax на основе положения окна мыши.

  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){

                    }
                });
            }
        }
    });
 

Этот вызов ajax будет вызываться, когда пользователь достигнет конца страницы. Вы можете указать высоту, на которой это происходит.

Комментарии:

1. у вас есть какие-либо идеи о том, как это сделать. ОЗНАЧАЕТ КОД

2. Пожалуйста, смотрите приведенный Выше код, он будет работать для вас, пожалуйста, укажите высоту в соответствии с вашими потребностями