Итак, я изучаю javascript уже 2 месяца и решил сделать прокрутку, чтобы при прокрутке страницы вы получали больше контента (больше абзацев в div).Я смотрел учебник на YouTube и сделал что-то подобное, но это не работает, как я ожидал.Сначала это выглядит так, как будто это работает, но я заметил, что мне не нужно прокручивать вниз (или прокручивать вниз), чтобы загрузить больше контента, но я также могу прокрутить вверх.Чтобы сэкономить ваше время (если вы не заинтересованы в чтении всего сценария), я проверяю следующее (код в конце сценария):
$(window).scrollTop() + $(window).height() > $("#load_data").height()
Что в Vanilla JS, насколько я понимаю, это:
window.innerHeight + window.scrollY > document.querySelector('#load_div').offsetHeight
scrollTop () и scrollY должны возвращать (или устанавливать) значение пикселей в верхней части прокручиваемой части окна (в данном случае).Затем мы добавляем внутреннюю высоту окна.Вот что я тогда не понимаю: разве эти 2 не должны быть больше высоты div?Так что это объясняет, почему, где бы я ни прокручивал, это срабатывает.Но как настроить это так, чтобы оно срабатывало только когда я внизу или рядом с ним?Вот полный код (без части ответа php, которая возвращает только абзац, который получил данные из базы данных):
<div id="load_data"></div>
<div id="load_data_message"></div>
</div>
<script>
$(document).ready(function(){
var limit = 8;
var start = 0;
var action = 'inactive';
function load_data(limit, start){
$.ajax({
url: 'infinitload.php',
method: 'POST',
data: {limit: limit, start: start},
cache: false,
success: function(data){
$('#load_data').append(data); //Appending data;
if(data == ''){
$('#load_data_message').html('<button>No results found</button>');
action = 'active';//if
}else{
$('#load_data_message').html('<button>Loading Content</button>');
action = 'inactive';
}//else
}//success
})//ajax
}//load_data()
//Loading for the first time
if(action == 'inactive'){
action = 'active';
load_data(limit, start);
}
$(window).scroll(function(){
if( $(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive'){
$('button:contains("Loading Content")').toggle();
action = 'active';
start = start + limit;
setTimeout(function(){
load_data(limit, start);
}, 1500);
}
});
});//dom ready
</script>
</body>
ОБНОВЛЕНИЕ: я попробовал подобный код http://jsfiddle.net/nick_craver/gWD66/, который полностью имеет смысл, и он работает вПример есть, но не в моем случае.Смущенный.Вероятно, что-то еще приводит к моей проблеме, поэтому я попытаюсь снова заглянуть в мой код.Спасибо за все ответы.