Tengo esta función llamada getData() que obtiene datos del servidor con una llamada ajax; todo funciona bien, el único problema es que se llama a la función getData() cuando me desplazo hacia la parte superior en lugar de que me llamen cuando llego al final de la página.

Dato curioso, estuve trabajando en esto hace una semana y todo funcionó bien.

Aquí está el fragmento de Javascript:

 $(window).scroll(function(){ if($(window).scrollTop() == $(document).height() - $(window).height()){ getData(); console.log('bottom'); } });

Editar: encontré este fragmento y parece funcionar, muy extraño.

 window.onscroll = function(ev) { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { getData(); } };

Esta es mi página html:

 <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3 results"></div> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script type="text/javascript"> var start = 0; var limit = 15; var reached_max = false; $(document).ready(function() { getData(); }); function getData() { if (reached_max) return; $.ajax({ url: 'data.php', method: 'POST', dataType: 'text', data: { getData: 1, start: start, limit: limit }, success: function(response) { if (response == "reached_max") reached_max = true; else { start += limit; $(".results").append(response); } } }); } window.onscroll = function(ev) { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { getData(); } }; /* $(window).scroll(function(){ if($(window).scrollTop() == $(document).height() - $(window).height()){ getData(); console.log('bottom'); } }); */ </script>