Identify the end of the page in the scroll?

Question

First of all, I’m sorry, I see you have other similar questions, but I’m having an error that I’ve been trying to solve for 24 hours.

The above image shows a method that 'tries to detect the end of the page' and then ajax by loading new products.

With regard to ajax and load the products this OK because I performed a test with a button. But every time keep clicking not quite right.

My app is mvc with bootstrap 4. What is taking me seriously is that I don’t know how else to find out or try why ALWAYS the totalheight is smaller than the scrollheight, the difference and minimum but so it doesn’t enter the condition to rotate the ajax.

body in css is 100% height.

I’ve tried other ways and I couldn’t. Can someone help me solve this? Thank you!

  $(document).ready(function () {

        toastr.success('Produto Carregados!');

        window.onscroll = function ()
        {
            var scrollHeight, totalHeight;
            scrollHeight = document.body.scrollHeight;
            totalHeight = window.scrollY + window.outerHeight;

            if (totalHeight === scrollHeight)

            {
                jQuery('#progress').show();
                $.ajax({
                    url: '/ProdutosMercado/ListaProdutosInicial',
                    data: { 'page': pagina },
                    success: function (data) {

                        if (data.length > 10) {
                            var div = document.getElementById('produtoscontainer');
                            div.innerHTML += data;
                            pagina++;
                            toastr.success('Produto Carregados!')
                        }
                        else
                            toastr.warning('Não há mais produtos!')

                        jQuery('#progress').hide();
                    }
                });
            }
        }

    });

Answer 1

I think if you add this code to check the end of the page, it will be better:

Replace the console.log with your ajax code

 var timer = null;


        window.addEventListener('scroll', function () {
            const faltante = 50

            if (timer !== null) {
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                    if (window.scrollMaxY-faltante < window.scrollY) {
                       console.log('tste3')
                    }
            }, 30);
        }, false);