如何检测用户何时滚动到 jQuery 中的 div 底部？

Question

There are a few people who have already asked this question but the last one I can see is almost 10 years old and the code that was given in the answer doesn't seem to work or at the very least doesn't work every time so I thought I would write this as it seems like the code is outdated.

Anyway, I have a div with the id terms, the overflow is set to auto so it is scrollable. I want a hidden div to become visible when the user has scrolled to the bottom of the terms div. At the moment I'm using this

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

but it doesn't work.

Answer 1

Your code works well for me. You can test this code too. I hope this help you:

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

Answer 2

Thanks to Elham linking me to this page https://www.w3docs.com/tools/code-editor/10827 the page had a negative value on it's if statement I added -100 to my if statement and that gave the event a bit of padding and it works every time.

jQuery(function ($) {
    $('#terms').bind('scroll', function () {
      if ($(this).scrollTop() + $(this).height() >= $(this)[0].scrollHeight - 100) {
                alert('end')
            }
        })
    });