javascript - How to know when a user scrolls past a <div>? - Stack Overflow

admin管理员组

文章数量:1346192

I'm building something where I show users items that they haven't seen.

Each item is in a <div>, so when the user scrolls past a div, or views the div, I want that item to be marked as having been seen.

Google reader does this, if you scroll past an item in your feed there it automatically marks it as read.

How can this be tracked? Advice please.

Note: It shouldn't be restricted to using the mouse to scroll, hitting page down/up, using arrow keys, etc should also be counted. The main criteria is that the user has seen a div.

I'm building something where I show users items that they haven't seen.

Each item is in a <div>, so when the user scrolls past a div, or views the div, I want that item to be marked as having been seen.

Google reader does this, if you scroll past an item in your feed there it automatically marks it as read.

How can this be tracked? Advice please.

Note: It shouldn't be restricted to using the mouse to scroll, hitting page down/up, using arrow keys, etc should also be counted. The main criteria is that the user has seen a div.

• javascript
• jquery
• html
• dhtml

Share Improve this question Follow asked May 24, 2011 at 14:39 AliAli 267k269269 gold badges592592 silver badges786786 bronze badges 1

• 3 As far as I know, they calculate each relevant div's offset from the top of the page and pare to the scroll height. Once scollHeight >= divHeight, then it's considered in-view. – Marc B Commented May 24, 2011 at 14:43

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You need jQuery's scrollTop.

Something like:

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

for when it first es into view, or add $('#mydiv').height() to the top offset if you want it to be marked when it's fully in view.

You could use a solution like this, http://www.appelsiini/projects/viewport, which I used in the past.

Or see this for other solutions: Detecting divs as rendered in the window to implement Google-Reader-like auto-mark-as-read?

Have a look at $("#divid").scrollTop().

I think you'll need something like this...

$(window).scroll(function(){
    var scroll = $(this).scrollTop();
    var vieweditems = $('div').filter(function(){
       return scroll> $(this).offset().top;
       //pare 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

});

本文标签： javascriptHow to know when a user scrolls past a ltdivgtStack Overflow