Прокрутка элементов на последний просмотренный функция .scroll().
Полезный функционал для обработки события прокрутки до появления выбранного элемента в окне.
$(document).ready(function() {
//переменная указывает когда произайдёт событие событие скролл. Если true то когда элемент полностью виден. Иначе когда появляется на экране.
var fullyInView = false;
//Флаг, указывает нужно ли выполнить аякс запрос.
var noMessagesFlag = false;
//После загрузки страницы прочиваем к самому последнему элементу.
$('ul.js-chat-list').animate({
scrollTop: $('.js-chat-list').children().last().position().top
},1,
function() {
setTimeout(function() { fullyInView = true; }, 1000);
});
function Utils() {}
//Функция обрабатывающая событие прокрутки.
Utils.prototype = {
constructor: Utils,
isElementInView: function(element, fullyInView) {
var pageTop = $('ul.js-chat-list').scrollTop();
var pageBottom = pageTop + $('ul.js-chat-list').height();
var elementTop = $(element).position().top;
var elementBottom = elementTop + $(element).height();
//Если элемент полностью на экране.
if (fullyInView === true && pageTop === 0) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
}
//Если любая часть на экране
else {
//Запрещаем выполнение если на экране элемент не полностью.
//return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
//Событие scroll()
$('ul.js-chat-list').scroll(function() {
if (noMessagesFlag) {
return;
}
var isElementInView = Utils.isElementInView($($('li.chat-list__item .chat-message__header').eq(0)), fullyInView);
if (isElementInView && fullyInView) {
fullyInView = false;
var moduleCount = $('li.chat-list__item').size() % 10;
//Определям номер страницы, на странице по 10 элементов максимум.
var n = moduleCount > 0
? ((($('li.chat-list__item').size() - moduleCount) + 10) / 10) + 1
: ($('li.chat-list__item').size() / 10) + 1;
$("#loaderTop").show();
$.ajax({
type: "GET",
url: "/Controller/Action",
data: {
pageNum: n,
dialogID: chatDialogItemID,
needPartial: !0
},
success: function (liMessages) {
//Первый элемент до вставки подгруженных.
var oldFirstMessage = $('ul.js-chat-list li.chat-list__item').first();
$('.js-chat-list').prepend(liMessages);
//Если элементов < 10 не нужно больше делать ajax
if ($('li.chat-list__item').length % 10 > 0) {
noMessagesFlag = true;
}
var previews = 0;
//Вычисляем высоту подгруженных элементов
$(oldFirstMessage).prevAll().each(function() {
previews += $(this).outerHeight(true);
});
$('ul.js-chat-list').animate({
//Прокручиваем
scrollTop: previews
},1,
function() {
fullyInView = true;
});
$("#loaderTop").hide();
}
});
}
});
});
