Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

If(isinView)/else is not firing as expected #3

Open
graemearg opened this issue Feb 20, 2011 · 2 comments
Open

If(isinView)/else is not firing as expected #3

graemearg opened this issue Feb 20, 2011 · 2 comments

Comments

@graemearg
Copy link

If(isinView)/else is not firing as expected.

isInView only fires when the top of the element comes into or exits the viewport. The bottom of the element does not fire isInView at all (Also related to previously submitted issue #2 with visiblePartY=='bottom').

Expected and actual results of the following example are detailed below:



<body style="padding:2000px 0;">

 <div style="min-height:2000px;background:red;"></div>

 <script type="text/javascript">

  $('div').bind('inview', function(e, isInView, visiblePartX, visiblePartY) {       
   if (isInView) {
    console.log('Element in view');
    if (visiblePartY == 'top') {
     console.log('Top of element in view.');
    } else if (visiblePartY == 'bottom') {
     console.log('Bottom of element in view.');
    } else {
     console.log('Element is entirely in view.')
    }
   } else {
    console.log('Element no longer in view.');
   }
  });
  
 </script>
 
</body>

Expected result when scrolling down the page from the top:

1) The top edge of the element comes into the bottom of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'top'" (Console log "Top of element in view").
2) Scroll down continues
3) The top edge of the element goes out of the top of the viewport. Nothing fires.
4) Scroll down continues
5) The bottom edge of the element comes into the bottom of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'bottom'" (Console log "Bottom of element in view").
6) Scroll down continues
7) The bottom edge of the element goes out of the top of the viewport, firing "isInView'/else (Console log "Element no longer in view").
8) Reverse scroll, now scrolling up the page
9) The bottom edge of the element comes into the top of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'bottom'" (Console log "Bottom of element in view").
10) Scroll up continues
11) The bottom edge of the element goes out of the bottom of the viewport. Nothing fires.
12) Scroll up continues
13) The top edge of the element comes into the top of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'top'" (Console log "Top of element in view").
14) Scroll up continues
15) The top edge of the element goes out of the bottom of the viewport, firing "isInView'/else (Console log "Element no longer in view").
16) Scroll ends

Actual result when scrolling down the page from the top:

1) The top edge of the element comes into the bottom of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'top'" (Console log "Top of element in view").
2) Scroll down continues
3) The top edge of the element goes out of the top of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'bottom'" (Console log "Bottom of element in view").
4) Scroll down continues
5) The bottom edge of the element comes into the bottom of the viewport. Nothing fires.
6) Scroll down continues
7) The bottom edge of the element goes out of the top of the viewport. Nothing fires.
8) Reverse scroll, now scrolling up the page
9) The bottom edge of the element comes into the top of the viewport. Nothing fires.
10) Scroll up continues
11) The bottom edge of the element goes out of the bottom of the viewport. Nothing fires.
12) Scroll up continues
13) The top edge of the element comes into the top of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'top'" (Console log "Top of element in view").
14) Scroll up continues
15) The top edge of the element goes out of the bottom of the viewport, firing "isInView'/else (Console log "Element no longer in view").
16) Scroll ends

@tiff
Copy link
Member

tiff commented Feb 21, 2011

The expected behavior described in 7 and 9 should now match the actual result.
I'll have a look at point 5 (which is also what issue #2 is about) in the next days.

See 2c3da2c

Thanks for that detailed report!

@qborreda
Copy link

Does this keep happening?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@tiff @qborreda @graemearg