Создание динамической прокрутки контента используя Ajax

Если Вы часто используете Google Reader, и хотите выводить с него замети на сайт? Этот урок для Вас. В уроке мы научимся создавать динамический вывод заметок Google Reader. Вначале будет выведено только несколько первых пунктов, но если начать прокручивать, заметки будут автоматически подгружаться.

Facebook сейчас тоже начали использовать этот метод, о нем мы поговорим в следующих уроках.

HTML структура

Давайте вначале сделаем вывод заметок. Для этого создадим простую структуру.

				<div  id="container">
					<div id="scrollbox"  >
						<div  id="content" >
							<p>Первый вывод</p>
							<p> Второй вывод </p>
							<p> Третий вывод </p>
							<p> Четвертый вывод </p>
							<p> Пятый вывод </p>
							<p> Шестой вывод </p>
							<p> Седьмой вывод </p>
							<p> Восьмой вывод </p>
							<p> Девятый вывод </p>
						</div>
					</div>
					<p><span  id="status" ></span></p>
				</div>
				

Контейнер scrollbox имеет фиксированною ширину и высоту. Контейнер content - содержимое вывода. В этот контейнер будут выводиться заметки. Контейнер status используется для отображения загруженных элементов или вывода соответствующего сообщения о состоянии загрузки.

Стили CSS

Высота и ширина контейнера прокрутки прикреплено с помощью CSS свойства overflow установленного автоматически. Это для того, чтобы прокрутка была только тогда, когда ее содержимое превышает высоту и ширину. Чтобы не добавлялась горизонтальная прокрутка, добавим атрибут overflow-x:hidden. Теперь прокрутка будет происходить только вверх или вниз.

				#container{
					width:400px;
					margin:0px auto;
					padding:40px 0;
			    }
			    #scrollbox{
					width:400px;
					height:300px;
					overflow:auto; overflow-x:hidden;
			    }
			    #container  > p{
					background:#eee;
					color:#666;
					font-family:Arial, sans-serif;  font-size:0.75em;
					padding:5px; margin:0;
					text-align:right;
			    }
				

Теперь, чтобы происходила загрузка большего содержимого, Вы должны понимать, концепцию JavaScript кода. Во-первых, мы будем использовать три атрибута объекта – scrollHeight, clientHeight и scrollTop.

scrollHeight - действительная высота внутреннего контейнера, т.е. фактическая высота содержимого контейнера scrollbox.

clientHeight – определяет видимую высоту, т.е. высоту контейнера в видимой области контейнера scrollbox.

scrollTop – расстояние в пикселях контента который загрузился и поднялся.

Когда значение scrollTop становиться равным scrollHeight, то полоса прокрутки достигла нижней позиции. Это тот момент, где должен подружатся новый элемент. Для того, чтобы прокрутка была более интересной, добавим scrolloffset. Он следит за тем, что количество пикселей, до нижней полосы прокрутки есть, так что мы можем начать получение новых пунктов.

JavaScript код

Сейчас напишем JavaScript код, который нужен для реализации нашей задумки. Как всегда нам необходимо подключить последнюю библиотеку jQuery.

				$('document').ready(function(){
					updatestatus();
					scrollalert();
			    });
			    function  updatestatus(){
					// Показывает количество загруженных пунктов
					var totalItems=$('#content  p').length;
					$('#status').text(' Загрузка '+totalItems+' элементов ');
			    }
			    function  scrollalert(){
					var  scrolltop=$('#scrollbox').attr('scrollTop');
					var  scrollheight=$('#scrollbox').attr('scrollHeight');
					var  windowheight=$('#scrollbox').attr('clientHeight');
					var scrolloffset=20;
					if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) {
						//Добавляет новые пункти 
						$('#status').text(' Загрузка новых элементов...');
						$.get('new-items.html', '',  function(newitems){
							$('#content').append(newitems);
							updatestatus();
						});
					}
					setTimeout('scrollalert();',  1500);
			    }
				

Функция updatestatus() подсчитывает количество загружающих элементов и отображает ее в состоянии службы. Функция scrollalert проверяет текущую позицию scrollTop из контейнера scrollbox. Если полоса прокрутки находиться вблизи от нижней области, подгружаются новые элемента используя Ajax.

Для подгруздки я использовал файл new-items.html, который просто отображает некоторые элементы. Вы для этого, можете использовать любые сценарии.

Содержимое, полученное с помощью Ajax, помещается в контейнер content и функция updatestatus() вызывает статус сообщение. setTimeout используется так, чтобы положение полосы прокрутки периодически проверялось, и если значение соответствует условию, извлекаются новые элементы.

На этом, пожалуй, все.