Как узнать, когда пользователь прокручивает мимо <div>? - PullRequest
7 голосов
/ 24 мая 2011

Я создаю что-то, где я показываю пользователям элементы, которые они не видели.

Каждый элемент находится в <div>, поэтому, когда пользователь просматривает блок или просматривает блок, яхотите, чтобы этот элемент был помечен как увиденный.

Читатель Google делает это, если вы прокручиваете там элемент в своем фиде, он автоматически помечает его как прочитанный.

Как это можно отследить?Совет, пожалуйста.

Примечание. Не следует ограничиваться использованием мыши для прокрутки, перемещением страницы вниз / вверх, использованием клавиш со стрелками и т. Д.Основным критерием является то, что пользователь видел div.

Ответы [ 4 ]

6 голосов
/ 24 мая 2011

Вам нужно jQuery's scrollTop.

Что-то вроде:

$(window).scrollTop() > $('#mydiv').offset().top;

, когда он появляется впервые, или добавьте $('#mydiv').height() к верхнему смещению, если вы хотите, чтобы он был отмечен, когда он полностью виден.

3 голосов
/ 24 мая 2011

Вы можете использовать решение, подобное этому, http://www.appelsiini.net/projects/viewport,, которое я использовал в прошлом.

Или посмотреть это для других решений: Определение элементов div, отображаемых в окне для реализации Google-Reader-like auto-mark-as-read?

1 голос
/ 24 мая 2011

Я думаю, тебе понадобится что-то вроде этого ...

$(window).scroll(function(){
    var scroll = $(this).scrollTop();
    var vieweditems = $('div').filter(function(){
       return scroll> $(this).offset().top;
       //compare the div's offset top with the window scroll position 
       // this returns the collection of viewed divs
    })// this object is colleection of viewd divs
      .removeClass('hilight')
      //Remove the class which distinguishes the unread and read items
      .map(function(){
          return this.id.split('_')[1];
      }).get();
      //This is the collection of ids of viewd divs
      //vieweditems  now holds the ids of viewed divs

});
1 голос
/ 24 мая 2011

Посмотрите на $("#divid").scrollTop().

...