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

Question

При использовании Google Reader и просмотре записей RSS в расширенном представлении записи автоматически помечаются как «прочитанные», как только на экране отображается определенный процент от деления (трудно определить, какой процент должен отображаться в случай с Google Reader). Итак, когда я прокручиваю построчно, код javascript может определить, что а) запись отображается в видимом окне и б) определенное количество видно, и когда эти условия выполняются, состояние переключается на чтение .

Кто-нибудь знает, как реализована эта функция? В частности, кто-нибудь здесь знает, как определить, прокручивал ли div вид, какая часть div видна?

Кроме того, я использую jQuery, поэтому, если у кого-нибудь есть примеры, относящиеся к jQuery, они будут очень благодарны.

Answer 1

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

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

Answer 2

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

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

Answer 3

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

isRead(element) {
   let rect = element.getBoundingClientRect();
   const visibleRatio = 0.85;
   let elementRatio = (window.innerHeight - Math.abs(rect.top))/rect.height;
   let isRead = (rect.top >= 0) && (elementRatio >= visibleRatio);
   return isRead; 
}

Answer 4

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

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's 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 в качестве элемента:

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);
}

Answer 5

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

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

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

Answer 6

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

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