Észlelése divs mint tette az ablakba, hogy végre a Google Reader-szerű auto-mark-as-olvasni?

szavazat
11

Amikor a Google Reader és a böngészés RSS bejegyzések a „Részletes” nézetben bejegyzéseket automatikusan kerül „olvasni” egyszer egy bizonyos százalékát a div látható a képernyőn (nehéz megmondani, milyen arányban kell lennie látható abban az esetben, Google Olvasó). Szóval, ahogy lefelé görgetve line-by-line, a javascript kódot tudja határozni, hogy a) a bejegyzés ne váljanak a látható ablak és b) egy bizonyos összeget látható és amikor ezek a feltételek teljesülnek, az állam toggled olvasni .

Van valakinek ötlete, hogy hogyan funkció alkalmazását? Pontosabban, nem itt valaki tudja, hogyan kell mondani, ha egy div a böngészőablakban egy mennyi a div látható?

Mellesleg én a jQuery, így ha valaki olyan jQuery-specifikus példák lennének nagy népszerűségnek örvend.

A kérdést 09/12/2008 21:33
a forrás felhasználó
Más nyelveken...                            


6 válasz

szavazat
4

Az igazi trükk az, hogy nyomon követni, ahol a görgetősáv van az elem, amely a terméket. Itt van néhány kód Egyszer felkorbácsolta kell csinálni: http://pastebin.com/f4a329cd9

Láthatjuk, hogy a lapozunk változik hangsúly. Csak azt kell, hogy adjunk több felvezető kódot a funkciót, amely kezeli az egyes fókusz változást. Úgy működik görgetés mindkét irányban, továbbá kattintva közvetlenül a görgetősáv, amely egyszerű egérkövetést nem adja meg (bár ebben az esetben, mivel a példa elemek mind azonos méretű, azonos szöveggel, nehéz megmondani, hogy azt valóban görgetni). A másik kérdés az, hogy mit kell tenni, ha a tartály fenekek ki. A megoldás már most csak akkor működik, FF. Ha azt szeretnénk, hogy ez néz ki az IE, akkor kell használni egy dummy elem, amely beleolvad a háttérben, mint az általam megjegyzésbe a kódot.

Válaszolt 15/12/2008 05:51
a forrás felhasználó

szavazat
2

Csak azért jöttem át ezt, ahogy kell ugyanazt a dolgot, és úgy néz ki, szuper hasznos:

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

Válaszolt 28/12/2008 07:53
a forrás felhasználó

szavazat
0

Akkor próbáld ki ezt, a lényeg az elemnek látható belső test több, és megfelel a látható aránya (ebben az esetben 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; 
}
Válaszolt 28/05/2018 19:11
a forrás felhasználó

szavazat
0

Annak kiszámításához, hogy egy elem látható, akkor létrehozhat egy ilyen funkció (hitel miatt van 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;
}

Szabhatja ezt a funkciót a helyzetet kiszámításával ha egy elem már olvasható:

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

Akkor majd hívja a fenti funkciókat, átadva a DOM node, mint az elem:

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

Akkor döntetlen az egészet együtt létrehozásával scroll hallgató (jQuery teszi ezt elég könnyű):

function setScrollListener() {

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

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

Érdemes megjegyezni, hogy ha azt akarjuk, hogy megszünteti, a tekercset hallgató, mondjuk, ha az összes cikket is olvasni, és akkor már nem kell hallgatni a tekercset, akkor hívja a unbind funkciót a scrollEventHandler. Ez olyan egyszerű, mint:

function unbindScrollEventHandler() {
  $(document).unbind('scroll', scrollEventHandler);
}
Válaszolt 03/10/2017 13:20
a forrás felhasználó

szavazat
0

A dom és javascript segítségével kiszámítja eleme eltolt a szülő. Kiszámításához tolva az ablakot ki kell használni a rekurzió és mászni az utat a csúcsra ablakot, és azt is, hogy hasonlítsa össze az ablak méretét. Egyre bonyolultabb, mert a cross-browser kérdések és kereteket.

Ahhoz, hogy a legjobb tudásom szerint, prototípus egy egyszerű viewportOffsetmódszer, amely nem a legtöbb munkát. Ön is ellenőrizheti a forrás getOffsetParentés scrollTo. Nem tudom, hogy körülbelül jquery, de azt gondolom, hogy hasonló módszerekkel.

Az a gyanúm, hogy a forgatókönyvet Google Reader egyszerűen fut időtúllépés, valószínűleg néhány alkalommal egy második, esetleg válaszul egy scroll eseményt. Mindkét esetben, biztos vagyok benne, hogy ez az adaptív (timeout változások alapján, hogy milyen gyorsan a felhasználó tekercsek, stb), és hogy elég okos ahhoz, hogy ne legyen egy forrás disznó (azaz nem csak ellenőrizni az összes divs a a dokumentum)

Válaszolt 14/12/2008 00:36
a forrás felhasználó

szavazat
0

Az én tapasztalatom, Reader eddig csak jelölt valamit olvasni, ha már moused-over vagy csattant rajta. Feltételezve, hogy ha görgetés az egér a div (I hajlamosak, hogy az egér jobb szélén a képernyőn, amikor görgetni), amely megmagyarázhatja a látszat, hogy csak lesz kijelölve, ha egy bizonyos% kimutatták.

Azt lehetne (és valószínű, hogy én) rossz, mégis. Csak azt tudom, hogy a törvény csak a lapozást én db-olvasó nem jelöljük őket. Van, hogy megbizonyosodjon arról az egeret fölé viszi az egeret őket gördíthető csinálni.

Válaszolt 09/12/2008 21:43
a forrás felhasználó

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