Erkennen divs in dem Fenster gerendert als Google-Reader-wie Auto-mark-as-lesen zu implementieren?

stimmen
11

Bei Google Reader und dem Surfen RSS Einträge in der „Erweitert“ Ansicht werden Einträge automatisch markiert ‚lesen‘, sobald ein bestimmte Prozentsatz des div auf dem Bildschirm sichtbar ist (schwer zu sagen, wie viele Prozent im Fall sichtbar sein muss Google Reader). So, wie ich Zeile-für-Zeile nach unten scrollen kann der JavaScript-Code fest, dass a) der Eintrag im sichtbaren Fenster wiedergegeben wird, und b) eine bestimmte Menge sichtbar ist und wenn diese Bedingungen erfüllt sind, wird der Zustand umgeschaltet zu lesen .

Hat jemand eine Idee, wie diese Funktion implementiert ist? Genauer gesagt, weiß jemand hier, wie zu sagen, ob ein div in Sicht gescrollt hat ein, wie viel des div ist sichtbar?

Als Nebenwirkung, verwende ich jQuery, also wenn jemand irgendwelche jQuery spezifische Beispiele hat, würden sie sehr geschätzt werden.

Veröffentlicht am 09/12/2008 um 21:33
quelle vom benutzer
In anderen Sprachen...                            


6 antworten

stimmen
4

Der eigentliche Trick ist , um zu verfolgen , wo die Scrollbar ist in dem Elemente mit Ihrem Artikel. Hier einige Code , den ich einmal aufgepeitscht , es zu tun: http://pastebin.com/f4a329cd9

Sie können sehen, dass, wie Sie es den Fokus ändert blättern. Sie müssen nur mehr Handler-Code auf die Funktion hinzuzufügen, die jede Fokusänderung behandelt. Es funktioniert in beiden Richtungen scrollen, und auch von rechts auf dem Scrollbar klicken, die ein einfaches Maus-Tracking werden Ihnen nicht (obwohl, da die Beispielelemente in diesem Fall gibt, sind die alle gleich groß ist, mit dem gleichen Text, es ist schwer zu sagen, dass es hat in der Tat gescrollt). Das andere Problem ist, was zu tun ist, wenn der Behälter anstößt. Die Lösung, die ich gerade jetzt funktioniert nur in FF. Wenn Sie wollen es in IE schön aussehen, werden Sie ein Dummy-Element verwenden müssen, die in den Hintergrund fügt sich, wie das habe ich in den Code als Kommentar gekennzeichnet.

Beantwortet am 15/12/2008 um 05:51
quelle vom benutzer

stimmen
2

Ich kam gerade über diese, wie ich die gleiche Sache brauchen, und es sieht super nützlich:

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

Beantwortet am 28/12/2008 um 07:53
quelle vom benutzer

stimmen
0

Sie können versuchen diese, ist der entscheidende Punkt, das Element sichtbar inneren Körper muss mehr und das sichtbare Verhältnis erfüllen (in diesem Fall 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; 
}
Beantwortet am 28/05/2018 um 19:11
quelle vom benutzer

stimmen
0

Um zu berechnen , ob ein Element sichtbar ist, können Sie erstellen eine solche Funktion (ist Ehre gebührt hier 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;
}

Sie können durch die Berechnung dieser Funktion auf Ihre Situation anpassen, wenn ein Element gelesen wurde:

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

Anschließend können Sie die oben genannten Funktionen aufrufen, in einem DOM-Knoten als Element passiert:

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

Sie können sie alle zusammen binden eine Rolle Zuhörer, indem (jQuery macht dies ziemlich leicht):

function setScrollListener() {

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

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

Es ist erwähnenswert, dass, wenn Sie den Scroll-Hörer entbinden wollen, sagen, wenn alle Artikel lesen und Sie nicht mehr auf die Rolle zu hören, dann können Sie die unbind Funktion innerhalb des Scroll nennen. Es ist so einfach wie:

function unbindScrollEventHandler() {
  $(document).unbind('scroll', scrollEventHandler);
}
Beantwortet am 03/10/2017 um 13:20
quelle vom benutzer

stimmen
0

Der Dom und Javascript können Sie ein Element aus dem übergeordneten Offset berechnen. die aus dem Fenster Offset berechnen Sie die Rekursion verwenden müssen, und klettern Sie Ihren Weg nach oben Fenster, und vergleichen Sie auch, dass gegen die Größe des Fensters. Es wird noch komplizierter, weil die Cross-Browser-Probleme und iframes.

Um das Beste aus meinem Wissen, Prototyp bietet eine einfache viewportOffsetMethode , die die meiste Arbeit für Sie erledigt. Sie können auch die Quelle überprüfen getOffsetParentund scrollTo. Ich weiß nicht , über Jquery, aber ich erwarte , dass es ähnliche Methoden bieten.

Meine Vermutung ist, dass das Skript in Google Reader einfach auf einem Timeout läuft, wahrscheinlich ein paar Mal pro Sekunde, oder vielleicht als Reaktion auf ein Scroll-Ereignis. In beiden Fällen, ich bin sicher, dass es adaptiv ist (Timeout ändert sich basierend darauf, wie schnell die Benutzerrollen, etc.), und dass es klug genug, um nicht eine Ressource Schwein (dh zu sein, nicht nur alle überprüfen Sie die divs in das Dokument)

Beantwortet am 14/12/2008 um 00:36
quelle vom benutzer

stimmen
0

Nach meiner Erfahrung hat Reader immer nur etwas als gelesen markiert, wenn ich moused-over haben oder darauf geklickt hat. Unter der Annahme, dass, wie Sie bewegen Sie die Maus über die div ist (Ich neige dazu, meine Maus an den rechten Rand des Bildschirms zu setzen, wenn ich scrollen), die das Aussehen könnte erklären, dass es wird nur markiert, wenn ein bestimmtes% gezeigt wurde.

Ich könnte (und bin wahrscheinlich) falsch, though. Ich weiß nur, dass der Akt der nur durch meine Artikel im Leser Scrollen nicht sie weg nicht markieren. Ich muss sicher, dass die Maus den Mauszeiger über sie machen, wie es zu tun scrollt.

Beantwortet am 09/12/2008 um 21:43
quelle vom benutzer

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