Функция AJAX не работает с помощью прокрутки

Поскольку вы заменяете содержимое $ ('# posts'), высота документа не изменяется после первого запроса ajax на scroll =>, поэтому вам нужно прокручивать вверх, а затем прокручивать вниз, чтобы вызвать другой запрос ajax. Поскольку я не знаю ожидаемого макета страницы, я дам простую базовую демонстрационную демонстрацию HTML JSFiddle

 <div id="main" style="height:200px; overflow-y : auto;"> <div id="posts"> </div> </div> 

Javascript

 var loadmoore = true, loaded_posts =0 ; function gent_sample_data(num_posts){ var i, sample_data = ''; for(i=0;i<num_posts;i++) { sample_data += "<p class'post'>title_select_query_result " + (loaded_posts + i) + "</p>"; } return sample_data; } function loadFeed(){ // generate sample data var sample_data = gent_sample_data(15); loaded_posts = loaded_posts + 15; $.ajax({ url : '/echo/html/', dataType: 'html', type: 'post', data: {'html':sample_data}, success: function(returnhtml){ console.log(returnhtml); // option 1 - add result into "havanaglia" div // var $post = $('<div class="havanagila"></div>'); // $post.html(returnhtml); // $("#posts").append($post); // option 2 - ad result after "havanaglia" div $("#posts").append('<div class="havanagila"></div>'); $("#posts").append(returnhtml); loadmoore = true; } }); } loadFeed(); $("#main").scroll(function () { if (loadmoore && $("main").scrollTop() >= ($("main").height()-100) ) { loadmoore = false; loadFeed(); } }); 

Для вашего случая я предлагаю использовать что-то вроде этого:

 var loadmoore= true; function loadFeed() { $.ajax({ url: 'loadmore.php', dataType: 'html', success: function (data) { var $havanaglia = $('<div class="havanagila"></div>'); $havanaglia.html(data); $("#posts").append($havanaglia); loadmoore = true; } }); } loadFeed(); $(window).scroll(function () { if (loadmoore && $(window).scrollTop() >= $(document).height() - $(window).height()-100) { loadmoore= false; loadFeed(); } }); 

Чтобы предотвратить получение одинаковых сообщений из базы данных, я рекомендую отправить на php идентификатор / номер последнего загруженного сообщения, чтобы получить сообщения с id / number> last loaded post

Если вы хотите загрузить функцию AJAX для каждого события прокрутки, нет необходимости проверять состояние. просто напишите ..

 $(window).scroll(function(){ loadFeed(); }); 

и если вы хотите вызвать функцию AJAX если свиток достиг дна, вам нужно проверить состояние, подобное …

 $(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()){ loadFeed(); } }); 

изменить значение loadFeed() funtion

 function loadFeed() { $.ajax({ url: 'loadmore.php', dataType: 'html', success: function (data) { $("#posts").append('<div class="havanagila"></div>'); $('#posts').html($('#posts').html()+data); } }); } 

это изменение, которое вы должны сделать $('#posts').html($('#posts').html()+data);

Если я правильно помню, у меня была такая же проблема для чего-то подобного. То, что я сделал, это остановить слушателя прокрутки и перезапустить его с успехом AJAX.

Вот код, который может вам помочь:

 function loadFeed() { $.ajax({ url: 'loadmore.php', dataType: 'html', success: function (data) { $("#posts").append('<div class="havanagila"></div>'); $('#posts').html(data); $(window).on('scroll', function() {checkScroll()}); // Run the function again upon success } }); } var checkScroll = function() { if ($('#SomeElementAlwaysAtTheBottomOfThePage')[0]) { var el = $('#SomeElementAlwaysAtTheBottomOfThePage'); var bottom_of_object = el.offset().top + el.outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); if (bottom_of_window >= bottom_of_object) { // If we're at the bottom... $(window).unbind('scroll'); // Stop the scroll function loadFeed(); // Load the AJAX } } } $(window).on('scroll', function() {checkScroll()}); // Start the function off 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="posts"></div> <div id="SomeElementAlwaysAtTheBottomOfThePage"></div> 

Похоже, вы перезаписали внутреннее содержимое элемента #posts html() . $("#posts").append('<div class="havanagila"></div>'); $('#posts').html(data);

Я думаю, вы хотите $("#posts").append($('<div class="havanagila"></div>').html(data));

И о вашей инструкции IF, if ((windowScroll + windowHeight) == documentHeight) , ваша функция ajax вызывается только в том случае, если вы прокручиваете верхнюю часть страницы (в Chrome).

Следующий код javascript используется для загрузки 4 записей, когда полоса прокрутки попадает в нижней части экрана. Это означает, что при первом появлении 4 записи будут получены, во второй раз следующие 4 записи будут выбраны, и все эти записи будут отображаться на экране. Этот код помогает нам уменьшить задержку загрузки при загрузке страницы.

 $(window).scroll(function() { if($(window).scrollTop() + $(window).height() == $(document).height()) { //alert("bottom!"); loadNext(); } }); var n1=0; var n2=4; function loadFirst() { var n1=0; var n2=4; } function loadNext() { n1=n1+4; n2=n2+4; //alert(n1); //alert(n2); if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("testidiv").innerHTML=document.getElementById("testidiv").innerHTML+xmlhttp.responseText; } } xmlhttp.open("GET","next_testimonial_action.php?a=" + n1 + "&b=" + n2,true); xmlhttp.send(); } </script> 

«next_testimonial_action.php? a =« + n1 + »& b =« + n2 »- это php-страница, содержащая логику для извлечения данных из db, а n1, n2 – это предел для записей, которые нужно извлечь. Если вам нужен php файл, который вы можете запросить в качестве комментария.

—- Важно —- "Вы должны вызвать функцию loadFirst () в bodyOnload или document.ready () jquery"

Все выглядит хорошо для меня,

Просто измените $(window).scroll(function () {...... to

 $(document).on( 'scroll','window', function(){ //or $(document).on( 'scroll','id of div containing scroll', var windowScroll = $(window).scrollTop(); var windowHeight = $(window).height(); var documentHeight = $(document).height(); if ((windowScroll + windowHeight) == documentHeight) { loadFeed(); } });