Question

我正在构建一些向用户显示他们尚未见过的项目的内容。

每个项目都在<div>中，因此当用户滚动浏览div或查看div时，我希望该项目被标记为已被查看。

Google阅读器执行此操作，如果您滚动浏览Feed中的某个项目，它会自动将其标记为已读。

如何跟踪？建议请。

注意：不应限制使用鼠标滚动，向下/向上翻页，使用箭头键等也应计算在内。主要标准是用户看到了div。

Answer 1

你需要jQuery的scrollTop。

类似的东西：

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

首次进入视图时，或者如果您希望在完全查看时将其标记为$('#mydiv').height()，请添加{{1}}。

Answer 2

您可以使用我之前使用过的http://www.appelsiini.net/projects/viewport这样的解决方案。

或者查看其他解决方案：Detecting divs as rendered in the window to implement Google-Reader-like auto-mark-as-read?

Answer 3

看看$("#divid").scrollTop()。

Answer 4

我认为你需要这样的东西......

$(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

});

如何知道用户何时滚过<div>？</div>

4 个答案: