08.04.2014 JQuery - селектор по тексту без учета регистра 10.04.2013 jQuery редактирование таблиц 13.12.2012 jScrollPane 2 - прокрутка контента вниз (autoReinitialise и scrollToBottom) 12.12.2012 jQuery 1.7 метод on - замена bind, live, delegate 16.03.2012 Мгновенный поиск результатов на JQUERY 29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Замена стандартного ALERT с помощью JQUERY 29.02.2012 JQUERY: как вести логи действий пользователя
#139

jScrollPane 2 - прокрутка контента вниз (autoReinitialise и scrollToBottom)

JScrollPane 2 или настраиваемый скроллбар.

У данного плагина, есть API который предоставляет различные полезные функции, в том числе и функцию прокрутки контента до самого низа. Данная возможность может понадобиться, когда у нас в блок динамически добавляется контент.

Для того, чтобы получить доступ к API функциям следует выполнить следующие манипуляции:
  1. var pane = $('#scroll-pane')..jScrollPane({autoReinitialise: true});
  2. var api = pane.data('jsp');
  3. api.scrollToBottom();


Здесь мы используем:
autoReinitialise - автоматическая переинициализация jScrollPane. Это может помочь в случаях, когда размеры контента в блоке с прокруткой (или окружающих элементов) изменяются. Нужен таймер, если мы не знаем изменился контент или нет, а если знаем, то нужно просто выполнить после изменения содержимого блока.
scrollToBottom - прокручивает контент до конца вниз.

Представим более реальную ситуацию, когда у нас динамически подгружается контент в блок, а для того, чтобы пользователь получал актуальную информацию, нам нужно этот блок каждый раз прокручивать вниз, после добавления контента - демо пример с комментариями в коде, через каждые 2 секунды добавляется новый контент в блок.

Если контент является исключительно текстовым, то этого примера нам будет достаточно, однако, если контент содержит изображения, то нам понадобится отследить загрузку изображений, иначе скрипт будет прокручивать содержимое некорректно, решается данная проблема с помощью плагина jquery.waitforimages, опираясь на пример выше, мы можем решить ее следующим образом:
  1. // смотрим количество изображений в блоке
  2. var img = $('#content').length;
  3.  
  4. // если нет изображений, то делаем обычный scrollToBottom
  5. // т.к. waitForImages отработает только при наличии изображений
  6. if(img > 0)
  7. {
  8.       $('#content').waitForImages(function() {
  9.             // если сделать обычный show, без задержки, то изображения 
  10.             // не успеют открыться и плагин также некорректно отработает
  11. 	$('#content img').fadeIn(function(){
  12. 		api.scrollToBottom(); 
  13. 	});
  14.       });
  15. }
  16. else
  17. {
  18.       api.scrollToBottom(); 
  19. }

В css надо не забыть скрыть все изображения в блоке #content, чтобы fadeIn отрабатывал не впустую.
Возможно решение с waitForImages не самое удачное и есть лучше, но я такого не нашел.

Более подробно о настройке jScrollPane 2 можно посмотреть здесь.

29.02.2012 JQUERY: раскрывающийся список 30.10.2011 Модальное окно как вконтакте
О сайте