onBecomesVisible в Javascript для нумерации страниц без кликов?

Question

есть ли библиотека javascript, которая предоставляет мне настраиваемое событие, как только определенный элемент становится видимым на холсте браузера?

Основная идея состоит в том, что, как только последний элемент в списке становится видимым на экране, я хочу загрузить следующие 10 элементов, чтобы пользователю не нужно было нажимать кнопку «Следующая страница». для этого было бы полезно событие onBecomesVisible, которое вызывается, как только отображается последний элемент. есть что-то подобное?

Slashdot выполняет загрузку первой страницы таким образом.

Answer 1

Вы можете написать свой собственный простой плагин, используя jQuery.

 $.belowViewport = function(elem){
  var port = $(window).scrollTop() + $(window).height();
  return port <= $(elem).offset().top;
 }

 $.fn.onBecomeVisible = function( fn ){
  var obj = this;
  $(window).scroll( function() {
   obj.each( function() {
    if(!$.belowViewport(this) && !$(this).data('scrollEventFired')){
     $(this).data('scrollEventFired', true);
     fn(this);
    }
   });
  });
  return this;
 }

А потом используйте это так

  $('.elements:last').onBecomeVisible( function(elem){ loadNewElems(); } );

Скрипт свяжет fn с каждым подходящим элементом. Функция будет запущена, когда любой из соответствующих элементов прокручивается в поле зрения. Также будет передана функция, какой элемент вызвал событие.

Обратите внимание, что вы не можете связать это событие, используя live, поэтому вам придется перепривязывать его после добавления новых элементов (при условии, что вы хотите событие для последнего из них тоже).

EDIT
Я был не прав здесь: visible не возвращает погоду или нет элемент находится в области просмотра. Однако я отредактировал исходный код, поэтому теперь он проверяет, находится ли элемент в области просмотра. Функция проверяет, находится ли элемент под областью просмотра, мы предполагаем, что если он не находится ниже области просмотра, он был прокручен, и мы должны выполнить функцию.

EDIT2
Протестировано это в Google Chrome 1.0, Firefox 3.0.10 и IE7

Answer 2

Дастин Диаз (который действительно очень умен, и вы должны прочитать больше его материала) в 2007 году написал статью о , обнаружив, когда элемент прокручивается в поле зрения.

Может быть именно то, что вам нужно.

Answer 3

Возможно, вы захотите взглянуть на бесконечную прокрутку:

http://plugins.jquery.com/project/endless-scroll

Answer 4

Альтернативная идея - всегда использовать функцию-обертку для отображения / скрытия всего. Другими словами, вместо непосредственного выполнения style.display='none'; или $("#something").hide();, вы всегда используете свою собственную функцию, которой вы передаете идентификатор элемента.

Затем вы можете легче отслеживать, когда элемент становится видимым / скрытым, и задавать дескрипторы событий для запуска.