Google Reader benzeri otomatik işaretini-olarak okunan uygulamaya pencerede işlenen div'leri algılama?

oy
11

Google Reader kullanarak ve Genişletilmiş görünümde RSS girdilerini tararken, girdileri otomatik olarak div belli bir yüzdesi halinde görünür olmak zorunda yüzde kaçının anlatmak için ekranda (zor görünür bir kez 'okundu' olarak işaretlenir Google okuyucu). Çizgiyi-satır aşağı kaydırma Yani, JavaScript kodu) giriş görünür pencerenin içinde işlenmiş olduğu belirleyebilir ve b) bir miktar görülebilir ve bu koşullar sağlandığında, devlet okuma konum değiştirir .

Herkes bu özellik nasıl uygulandığını bir fikri var mı? Özellikle, kimse burada bir div görünüm içine kaydırılması olan bir kaç div görünür olması durumunda nasıl söyleyeceğini biliyor?

Herkes herhangi jQuery belirli örnekler olduğu takdirde, bunların çok takdir böylece bir kenara, ben, jQuery kullanıyorum.

Oluştur 09/12/2008 saat 21:33
kaynak kullanıcı
Diğer dillerde...                            


6 cevaplar

oy
4

Gerçek hüner kaydırma çubuğu öğeleri içeren elemanda olduğu izlemenize tutmaktır. İşte bir kez yapma kadar çırpılmış bazı kod: http://pastebin.com/f4a329cd9

Sen kaydırma gibi odak değiştirdiğini görebiliriz. Sadece her odak değişiklik işleyen işlevine daha işleyici kodu eklemek gerekir. Doğru örnek elemanları aynı metin ile aynı boyut, çünkü bu durumda, o söylemek zor olsa basit fare izleme size (vermeyecektir kaydırma, tıklayarak da hem yönde kaydırma ve işleri gerçekten) kaydırılmıştır. Diğer konu konteyner dibe ne yapmanız gerektiği olduğunu. Şu anda var çözüm sadece FF çalışır. Eğer IE güzel görünmesi olmasını istiyorsanız, benim kodunda dışarı yorumladı gibi, arka plana karıştırır bir kukla elemanı kullanmak gerekecek.

Cevap 15/12/2008 saat 05:51
kaynak kullanıcı

oy
2

Ben de aynı şeyi gerekir ve süper kullanışlı görünüyor ben bu rastladım:

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

Cevap 28/12/2008 saat 07:53
kaynak kullanıcı

oy
0

Bunu birini deneyebilirsiniz, kilit nokta elemanı iç gövde daha görünür olmalıdır ve (bu durumda 0.85 olarak) görülebilir oranını karşılayacak.

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; 
}
Cevap 28/05/2018 saat 19:11
kaynak kullanıcı

oy
0

Bir öğe görünür olup olmadığını hesaplamak için, bu tür bir işlev oluşturabilir (kredi buraya geliyor 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;
}

Bir eleman okundu eğer hesaplayarak kendi durumunuza göre işlev özelleştirebilirsiniz:

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

Daha sonra eleman olarak bir DOM düğümünde geçen yukarıdaki işlevleri çağırabilirsiniz:

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

Bir kaydırma dinleyicisi (jQuery bu oldukça kolaylaştırır) oluşturarak bu arada kravat:

function setScrollListener() {

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

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

Bu kaydırma dinleyici kesme istediğiniz takdirde, tüm makaleleri okunmuş ve artık kaydırma dinlemek gerekiyorsa, scrollEventHandler içinde unbind işlevini çağırabilirsiniz demek dikkati çekiyor. Bu kadar basittir:

function unbindScrollEventHandler() {
  $(document).unbind('scroll', scrollEventHandler);
}
Cevap 03/10/2017 saat 13:20
kaynak kullanıcı

oy
0

dom ve javascript Eğer üst öğesinden ofset bir öğe hesaplamak edelim. Eğer Özyinelemeyi kullanması ve en üst pencereye yolunuzu tırmanmak gerekiyor penceresinden ofset hesaplamak ve aynı zamanda pencerenin büyüklüğüne karşı karşılaştırmak. Çünkü çapraz tarayıcı sorunları ve iç çerçevelerin daha karmaşıklaşıyor.

Benim kadarıyla, prototip basit sunmaktadır viewportOffsetsizin için işin çoğunu yapar yöntemi. Ayrıca kaynağını kontrol edebilirsiniz getOffsetParentve scrollTo. Jquery bilmem, ama benzer yöntemler sunmayı bekliyoruz.

Benim tahminim google okuyucuda script sadece bir zaman aşımı üzerinde muhtemelen birkaç kez ikinci, ya da belki bir kaydırma olayına yanıt olarak çalışır olmasıdır. Her iki durumda da, ben (ne kadar hızlı kullanıcı kaydırma dayalı zaman aşımı değişiklikleri, vb) adaptif olduğundan eminim ve bir kaynak domuz olmak (yani sadece tüm div'leri kontrol etmiyoruz kadar akıllıyız olduğunu döküman)

Cevap 14/12/2008 saat 00:36
kaynak kullanıcı

oy
0

I-moused ya da üzerinde tıklamışsanız okundu olarak tecrübe olarak, Okuyucu sadece hiç bir şey işaretlemiştir. Eğer fare div bitti kaydırırken varsayarsak belli% gösterilmiştir zaman sadece kapalı işaretlenmiş alır o görünümünü açıklayabilir ki (ben kaydırırken ekranın sağ kenarına Faremi koymak eğilimindedir).

Gerçi yanlış (ve muhtemelen değilim) olabilir. Ben sadece okuyucuda benim öğeler arasında kaydırma eylemi onları anlamına gelmediğini biliyoruz. Ben bunu yapmak için kayar olarak üzerlerinden emin fare fareler yapmak zorunda.

Cevap 09/12/2008 saat 21:43
kaynak kullanıcı

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