Detect when the end of a div is visible

Question

I need to know if the end of a div element is currently visible in the users' browser.

I tried something I saw on the web, but scrollTop() always gave me zero in my Browser. I read something about an issue in Chrome, but I didn't understand quite well.

jQuery(
  function($) {
    $('#flux').bind('scroll', function() {
      if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        alert('end reached');
      }
    })
  }
);

My idea is the following:

1- User loads page and sees a Bar (sticky div at bottom visible page) with some information. 2- After scrolling a bit, and reaching the end of a div element, this bar will position there, after the div. This is the bar's original position

I wasn't really able to know when I was at the end of the div element. Eventually I found this code:

if ($(window).scrollTop() >= $('#block-homepagegrid').offset().top + $('#block-homepagegrid').outerHeight() - window.innerHeight) {
  $('.hero-special-message').removeClass('hero-special-messege-scrolling');
} else {
  $('.hero-special-message').addClass('hero-special-messege-scrolling');
}
});

I see that it's working, but I'm having a bit of trouble understanding what it does.

I know the following:

1. $(window).scrollTop();

this gives me the amount of pixels the user has scrolled, pretty self explanatory.

2. $('#block-homepagegrid').offset().top;

I THINK this is the distance between the start of the page and the start of the div. I know it's the current coordinates, but what is top exactly here?

3. $('#block-homepagegrid').outerHeight();

this gives the height of the element, I know there are 3, like
height(), innerHeight() and outerHeight(), if you want to take into
account border, margin, padding, which is the better to use?

4. window.innerHeight;

I understand this is what the user sees, but I'm having troubles understanding why does it matter for my situation.

Thanks!

Top is the offset coordinates (the top) of the your referenced element in relation to the document. Offset returns the top and left coordinates of a referenced element. — elke_wtf, Sep 16 '19 at 20:02
The answer here will explain why you need innerHeight https://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery — elke_wtf, Sep 16 '19 at 20:26

score 0 · Answer 1 · answered Sep 16 '19 at 20:14

You may be interested in the native JavaScript IntersectionObserver API. It automatically figures out what percentage of a given element is visible in the window and triggers callbacks based on that. So then you can do this:

function visibleHandler(entries) {
  if (entries[0].intersectionRatio >= 1.0) {
    // The whole element is visible!
  } else {
    // Part of it is scrolled offscreen!
  }
}
const observer = new IntersectionObserver(visibleHandler, {threshold: 1.0});
observer.observe(document.getElementById('flux'));

Now, whenever the element with ID flux is 100% in view, it will trigger the visibleHandler. It will also trigger again if it's scrolled back out of view; that's why the function checks the ratio of visibility to see if it just hit 100% or just got reduced from 100%. You could be more fancy and use the observer entry's insersectionRect, which gives you the rectangle containing the visible portion of the element, and use that to determine top/bottom visibility.

Detect when the end of a div is visible

1 Answers1