Как привязать бесконечный скроллинг к html элементу?

Question

[Даниил Лаптев]

Как сделать подгрузку для своего (ol#messages) скролл бара? Сейчас подгружает при прокрутке всей страницы.

Java Script

var currentPage = 1;
var intervalID = -1000;

function checkScroll() {
  if (nearBottomOfPage()) {
    currentPage++;
    jQuery.ajax('?page=' + currentPage, {asynchronous:true, evalScripts:true, method:'get', success: function(data, textStatus, jqXHR) {
		$('.messages').append(jQuery(data).find('.messages').html());
		if(typeof jQuery(data).find('.messages').html() == 'undefined' || jQuery(data).find('.messages').html().trim().length == 0){
			clearInterval(intervalID);
		}
	},});
  }
}

function nearBottomOfPage() {
  return scrollDistanceFromBottom() < 50;
}

function scrollDistanceFromBottom(argument) {
  return pageHeight() - (window.pageYOffset + self.innerHeight);
}

function pageHeight() {
  return Math.max(document.body.scrollHeight, document.body.offsetHeight);
}

$('document').ready(function(){
	intervalID = setInterval(checkScroll, 250);
})
;

HTML

<ol id='messages'>
  <div class='messages'>
    <li>Сообщение</li>
    <li>Сообщение</li>
    ....
  </div>
</ol>

CSS

.body-mess .background .autor-list ol:hover {
  overflow-y: scroll;
}

У ol#messages есть свой скролл-бар, вот при его прокрутке и должна происходить подгрузка.

Answer 1

[Сергей Протько]

jsfiddle.net/P9sQc
приблизительно так.

Comments

[Даниил Лаптев]

Это, конечно, хорошо, но хотелось бы именно к тому коду, что указан в вопросе прикрутить

Answer 2

[Александр Хиренко]

Код у Вас, мягко говоря ужасный.
Если Вы уже используете jQuery то используйте его, а то у вас то чистый JS то jQuery, да еще и setInterval, зачем он там ума не приложу, есть же событие scroll.
Перепишите код, согласно примеру выше.

Comments

[Даниил Лаптев]

Так и поступил. Спасибо.