Обнаружение divs, отображаемых в окне для реализации Google-Reader, например, автоматической метки-как-read?

Ответ 1

Настоящий трюк заключается в том, чтобы отслеживать, где находится полоса прокрутки в элементе, содержащем ваши элементы. Вот какой код я однажды взбивал, чтобы сделать это: http://pastebin.com/f4a329cd9

Вы можете видеть, что при прокрутке он меняет фокус. Вам просто нужно добавить дополнительный код обработчика функции, которая обрабатывает каждое изменение фокуса. Он работает прокруткой в ​​обоих направлениях, а также нажатием правой кнопки на полосе прокрутки, которое простое отслеживание мыши не даст вам (хотя в этом случае, поскольку элементы примера имеют одинаковый размер, с тем же текстом, трудно сказать, что он действительно прокручивается). Другая проблема заключается в том, что делать, когда контейнер заканчивается. Решение, которое я имею прямо сейчас, работает только в FF. Если вы хотите, чтобы он выглядел хорошо в IE, вам придется использовать фиктивный элемент, который смещается в фоновом режиме, например тот, который я закомментировал в коде.

Ответ 2

Я просто наткнулся на это, поскольку мне нужно то же самое, и это выглядит супер полезно:

http://www.appelsiini.net/projects/viewport

Ответ 3

По моему опыту, Reader только когда-либо отмечал что-то как прочитанное, если у меня есть moused-over или нажал на него. Предполагая, что, когда вы прокручиваете мышь, над div (я, как правило, накладываю мышь на правый край экрана, когда я прокручиваю), что может объяснить внешний вид, что он выделяется только при отображении определенного%.

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

Ответ 4

Dom и javascript позволяют вычислять смещение элемента от его родителя. Чтобы вычислить смещение из окна, вам нужно использовать рекурсию и перейти к верхнему окну, а также сравнить ее с размером окна. Это усложняется из-за проблем с кросс-браузером и iframe.

Насколько я знаю, прототип предлагает простой метод viewportOffset, который выполняет большую часть работы для вас. Вы также можете проверить источник на getOffsetParent и scrollTo. Я не знаю о jquery, но я ожидаю, что он предложит аналогичные методы.

Я предполагаю, что script в Google Reader просто запускается с тайм-аутом, возможно, несколько раз в секунду или, возможно, в ответ на событие прокрутки. В обоих случаях я уверен, что он адаптивен (изменения таймаута в зависимости от того, насколько быстро прокручивается пользователь и т.д.), И что он достаточно умен, чтобы не быть ресурсоемкой (т.е. Не просто проверять все div в документ)

Ответ 5

Чтобы вычислить, является ли элемент видимым, вы можете создать такую ​​функцию (здесь должен быть кредит fooobar.com/info/10584/...):

function isScrolledIntoView(element) {
  var elementTop = element.getBoundingRect().top;
  var elementBottom = element.getBoundingRect().bottom;

  var isVisible = (elementTop <= window.innerHeight) && (elementBottom >= 0);
  return isVisible;
}

Вы можете настроить эту функцию в своей ситуации, вычислив, был ли элемент прочитан:

function isRead(element) {
  var elementTop = element.getBoundingRect().top;
  var elementBottom = element.getBoundingRect().bottom;
  var elementHeight = elementBottom - elementTop;

  // if 75% of the document has been scrolled, we'll assume it been read
  var readIfPercentage = 0.75;

  // an element has been read if the top has been scrolled up out of view
  // and at least 75% of the element is no longer visible
  var isRead = (elementTop < 0 && Math.abs(elementTop) / elementHeight >= readIfPercentage);
  return isRead;
}

Затем вы можете вызывать функции выше, передавая в DOM node в качестве элемента:

isScrolledIntoView(document.getElementById('targetDiv');
//or
isRead(document.getElementById('targetDiv');

Вы можете связать все это, создав прослушиватель прокрутки (jQuery делает это довольно легко):

function setScrollListener() {

  var scrollEventHandler = function() {
    if (isRead(document.getElementById('article'))) {
      // set article to 'read'
    }
  }

  // on scroll, fire the event handler
  $(document).scroll(scrollEventHandler);
}

Стоит отметить, что если вы хотите отключить прослушиватель прокрутки, скажите, прочитаны ли все статьи, и вам больше не нужно слушать свиток, вы можете вызвать функцию unbind в scrollEventHandler. Это так же просто, как:

function unbindScrollEventHandler() {
  $(document).unbind('scroll', scrollEventHandler);
}