If(isinView)/else is not firing as expected

graemearg commented 13 years ago

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 commented 13 years ago

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 https://github.com/protonet/jquery.inview/commit/2c3da2c8b20b29186f91f47a8b39f90f5a1d2669

Thanks for that detailed report!

qborreda commented 9 years ago

Does this keep happening?

protonet / jquery.inview

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