6

Estoy utilizando este script de jQuery pero funciona al reves

var heightPage = $(document).height();

$(window).scroll(function(){
    if(($(window).scrollTop() + $(window).height()) == heightPage) {
            alert("final de la página");
    }      
});

se supone que debería ejecutar el alert cuando llegue al final de la página pero lo ejecuta cuando llegas al principio

2
  • 4
    Eh probado su código, y funciona sin ningún problema. Sería bueno que comparta el código html y css también para encontrar el origen del problema. Commented el 2 sept. 2018 a las 22:03
  • 1
    Lo he probado en firefox y chrome pero en ninguno funcionó cómo esperaba, es un sistema muy amplio con varios script vinculados y html dinamico, lo que puedo aportar es que modifiqué el script y ahora funciona cómo estaba esperando Commented el 2 sept. 2018 a las 22:41

2 respuestas 2

8

He logrado el objetivo gracias a una publicación en inglés de github el script es el siguiente:

$(window).on("scroll", function() {
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
        alert("Ha llegado al final de la página");
    }
});

Es un poco más compleja (más lineas de código y más operaciones) pero en mi extraño caso funcionó cómo necesitaba, es una alternativa para la misma función

Link del Gist en Github: https://gist.github.com/toshimaru/6102647

Actualización:

Encontrar el final del scroll de un div

Últimamente me surgió la necesidad de algo similar pero en lugar de toda la página necesité encontrar el final del scroll de un sólo div.

El código es JavaScript puro

function esElFinal() {
  let element = document.getElementById("scroll");

  if (element.offsetHeight + element.scrollTop >= element.scrollHeight) {
    alert("Llegamos al final del bloque");
  }
}
.container {
  max-height: 100px;
  overflow-y: auto
}

.content {
  height: 100px
}

.red {
  background: red
}

.blue {
  background: blue
}

.green {
  background: green
}
<div onscroll="esElFinal()" id="scroll" class="container">
  <div class="content red"></div>
  <div class="content blue"></div>
  <div class="content green"></div>
</div>

4

Creo que e podido conseguirlo con vanilla javascript, espero que a otra persona le resulte util:

var elm =document.querySelector('#datos-scroll');

addEventListener('scroll', function(){

    if ((window.innerHeight + window.scrollY) >= elm.offsetHeight){

        console.log('LLegamos al final del bloque');

    }
});`
0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.