Детектирование дивы вынесенная в окне для реализации Google Reader, как-авто-марки-а-читать?

голоса
11

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

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

Как и в сторону, я использую JQuery, так что если кто имеет какие-либо JQuery-конкретные примеры, они были бы оценены.

Задан 09/12/2008 в 21:33
источник пользователем
На других языках...                            


6 ответов

голоса
4

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

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

Ответил 15/12/2008 в 05:51
источник пользователем

голоса
2

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

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

Ответил 28/12/2008 в 07:53
источник пользователем

голоса
0

Вы можете попробовать это, ключевым моментом является то элемент должен видеть внутренний корпус больше и встретить видимое отношение (в данном случае 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; 
}
Ответил 28/05/2018 в 19:11
источник пользователем

голоса
0

Для того , чтобы вычислить , является ли элемент видимым, вы можете создать такую функцию (кредит должен здесь 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);
}
Ответил 03/10/2017 в 13:20
источник пользователем

голоса
0

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

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

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

Ответил 14/12/2008 в 00:36
источник пользователем

голоса
0

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

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

Ответил 09/12/2008 в 21:43
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more