javascript - slow - ¿Detecta los divs tal como se muestran en la ventana para implementar Auto-mark-as-read como Google Reader?

scroll jquery ejemplos

Question

Al usar Google Reader y explorar las entradas de RSS en la vista "Ampliada", las entradas se marcarán automáticamente como "leídas" una vez que un determinado porcentaje de div esté visible en la pantalla (es difícil determinar qué porcentaje debe ser visible en el caso de Lector de Google). Por lo tanto, a medida que me desplazo línea por línea, el código de JavaScript puede determinar que a) la entrada se representa en la ventana visible yb) se ve una cierta cantidad y cuando se cumplen esas condiciones, el estado se alterna para leer .

¿Alguien tiene alguna idea de cómo se implementa esa característica? Específicamente, ¿alguien aquí sabe cómo saber si un div se desplazó a la vista y cuánto de div es visible?

Como un aparte, estoy usando jQuery, así que si alguien tiene algún ejemplo específico de jQuery, sería muy apreciado.

Answer 1

El verdadero truco es hacer un seguimiento de dónde está la barra de desplazamiento en el elemento que contiene tus artículos. Aquí hay un código que una vez azotado para hacerlo: http://pastebin.com/f4a329cd9

Puedes ver que a medida que te desplazas cambia el enfoque. Solo necesita agregar más código de controlador a la función que maneja cada cambio de enfoque. Funciona desplazarse en ambas direcciones, y también al hacer clic derecho en la barra de desplazamiento, que el simple seguimiento del mouse no le dará (aunque en este caso dado que los elementos de ejemplo son todos del mismo tamaño, con el mismo texto, es difícil decir que de hecho se ha desplazado). El otro problema es qué hacer cuando el contenedor toca fondo. La solución que tengo ahora solo funciona en FF. Si quieres que se vea bien en IE, tendrás que usar un elemento ficticio que se mezcle con el fondo, como el que he comentado en el código.

Answer 2

En mi experiencia, Reader solo ha marcado algo como leído si lo he pasado por encima o he hecho clic en él. Asumir que a medida que desplazas el mouse está sobre el div (yo tiendo a colocar el mouse en el borde derecho de la pantalla cuando me desplazo) eso podría explicar la apariencia de que solo se marca cuando se muestra un cierto%.

Sin embargo, podría estar (y probablemente estoy) equivocado. Solo sé que el simple hecho de desplazarse por mis elementos en el lector no los marca. Tengo que asegurarme de que el mouse pase sobre ellos mientras se desplaza para hacerlo.

Answer 3

Dom y javascript le permiten calcular un desplazamiento de elemento desde su elemento principal. Para calcular el desplazamiento desde la ventana, necesita usar la recursión y escalar hacia la ventana superior, y también compararla con el tamaño de la ventana. Se vuelve más complicado debido a problemas e iframes entre navegadores.

Según mi leal saber y entender, prototype ofrece un método sencillo viewportOffset que hace la mayor parte del trabajo por usted. También puede verificar la fuente de getOffsetParent y scrollTo . No sé sobre jquery, pero espero que ofrezca métodos similares.

Mi suposición es que el script en google reader simplemente se ejecuta en un tiempo de espera, probablemente unas pocas veces por segundo, o quizás en respuesta a un evento de desplazamiento. En ambos casos, estoy seguro de que es adaptativo (los cambios de tiempo de espera se basan en la velocidad con la que el usuario se desplaza, etc.) y que es lo suficientemente inteligente como para no ser un cerdo de recursos (es decir, no solo verifica todos los divs en el documento)

Answer 4

Me acabo de enterar de esto porque necesito lo mismo y me parece súper útil:

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

Answer 5

Para calcular si un elemento es visible, puede crear dicha función (se debe abonar aquí https://.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;
}

Puede personalizar esa función según su situación calculando si un elemento ha sido leído:

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

A continuación, puede llamar a las funciones anteriores, pasando un nodo DOM como elemento:

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

Puedes unir todo creando un oyente de desplazamiento (jQuery lo hace bastante fácil):

function setScrollListener() {

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

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

Vale la pena señalar que si desea desvincular el oyente de desplazamiento, diga si todos los artículos han sido leídos y ya no necesita escuchar el desplazamiento, puede llamar a la función de desvinculación dentro de scrollEventHandler. Es tan simple como:

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