[Pregunta]: Saber cuando se llega al pie de pagina con JQUERY

[Leguim]

Buenos días, mi pregunta es como podría saber cuando se llega a el pie de pagina de pagina usando Jquery.. Busque en el navegador y use una solución de algunas otras que no se ejecutaban correctamente. Esta solución utiliza un margen de error según lo pude leer de su autor.

Código (javascript) [Seleccionar] Expandir


const margen = 0.1;

$(document).on("scroll", function()
{
    if(margen > $(document).height() - $(window).scrollTop() - $(window).height())
    {
           alert('ejecutado');
    }
}


Este código funciona con algunos errores y es que dependiendo de algunas resoluciones no se ejecuta nada.. Por supuesto quizás esta demás decir que estas resoluciones son de altura no de ancho... si yo achico la altura de la pestaña de la pagina se verá afectado el funcionamiento de el scroll. Algo que no quiero ya que sin importar que resolución se use quiero que el sistema funcione lo más optimo posible.

Intente cambiando el margen de error de 0.1 como estaba especificado originalmente a 0.5 y anduvo en la resolución deseada pero en otras resoluciones quizás o no funciona o se repite la ejecución varias veces algo muy raro.

Tampoco se si lo ideal sería ir probando de 0.1 a el 0.5 es decir, 0.2, 0.3 y 0.4 hasta encontrar el equilibrio ya que no se si en otras computadores/dispositivos esto funcionaría correctamente.

Estuve probando por mi cuenta los valores manejados a ver si encontraba algo inusual pero la verdad algo inusual no encuentro o mejor dicho no tengo idea que es lo que podría suceder.

Las pruebas las hice así

Código (javascript) [Seleccionar] Expandir


     const margen = 0.5;

     $(document).on("scroll", function()
     {
           var document_height = $(document).height();
         var window_scroll_top = $(window).scrollTop();
         var window_height = $(window).height();

           console.log('$(document).height() = '+document_height+' | $(window).scrollTop() = '+window_scroll_top+' | $(window).height() = '+window_height);
           console.log('margen > $(document).height() - $(window).scrollTop() - $(window).height()');
           console.log(margen+' > ('+document_height+' - '+window_scroll_top+' - '+window_height+')');
            console.log(margen+' > ('+(document_height - window_scroll_top - window_height)+')');
 
               if(margen > $(document).height() - $(window).scrollTop() - $(window).height())
               {
                   alert('ejecutado');
               }
           });


Muchas gracias desde ya!

[@XSStringManolo]

Usa addeventlistener de js vanilla. El 13 es el número de píxeles desde el final del scroll hacia arriba por si quiere realizar algo antes de llegar al pie de página:

Código (javascript) [Seleccionar] Expandir

(DetectarFinalDeScroll( x, y ) {
x.addEventListener( 'scroll', DetectarFinalDeScroll() { if ( x.innerHeight x.scrollY > y.height - 13) { //Aqui el codigo a ejecutar.
} } ); })( window, document );

[Leguim]

Te agradezco mucho!

[EdePC]

Saludos,

- A mi me funciona bien:

  <script>
    const margen = 0.1;

    $(document).on("scroll", function() {
      if ( margen > $(document).height() - $(window).scrollTop() - $(window).height() ) {
        let date = new Date()
        console.log(date.now() + ' Ejecutado');
      }
    })
  </script>

- Solo tienes que considerar que el margen es la distancia máxima que puede haber antes de bajar el Scroll al máximo, es decir, puede ser el tamaño en pixeles de tu pie de página.

- El margen debería de ser 0, pero no es así debido a los cálculos previos [ $(document).height() - $(window).scrollTop() - $(window).height() ] lo cual devuelve un decimal muy cercano a cero pero no cero.

- Puedes tener problemas en el funcionamiento debido a que usas alert(), ya que este toma el foco y deja desconcertado al scroll, este scroll podría seguir moviéndose o quedar en stand by. Además debes considerar de que el evento scroll se realiza cuando el scroll se mueve/cambia, y esto sucede cuando se cambia de tamaño la ventana, el usuario lo mueve, se hace zoom, etc. Por esto es que se te ejecuta varias veces si el scroll se encuentra tocando el "margen" y se produce alguno de estos eventos.

[Leguim]

O.O Woao! te agradezco mucho la explicación me sirvió mucho!

[@XSStringManolo]

Saludos,

- A mi me funciona bien:

- Solo tienes que considerar que el margen es la distancia máxima que puede haber antes de bajar el Scroll al máximo, es decir, puede ser el tamaño en pixeles de tu pie de página.

- El margen debería de ser 0, pero no es así debido a los cálculos previos [ $(document).height() - $(window).scrollTop() - $(window).height() ] lo cual devuelve un decimal muy cercano a cero pero no cero.

- Puedes tener problemas en el funcionamiento debido a que usas alert(), ya que este toma el foco y deja desconcertado al scroll, este scroll podría seguir moviéndose o quedar en stand by. Además debes considerar de que el evento scroll se realiza cuando el scroll se mueve/cambia, y esto sucede cuando se cambia de tamaño la ventana, el usuario lo mueve, se hace zoom, etc. Por esto es que se te ejecuta varias veces si el scroll se encuentra tocando el "margen" y se produce alguno de estos eventos.

La explicación del alert no es correcta. El scroll no se vuelve loco tras un alert. Se ejecuta múltiples veces por como está implementada la función en Jquery, no porque el cambio de foco afecte de ninguna forma al scroll o se vuelva a detectar un evento debido al cambio de foco. Es importante aclararlo porque se puede registrar prácticamente cualquier evento, cambio de foco incluido.

La función del scroll en Jquery no es más que un bindeo de un handler a un evento en javascript. Cada vez que el scroll se mueve se hace una llamada al handler del evento.

Puedes desbindear el handler justo antes del alert o el prompt y el trigger del evento no hace nada ya que el handler esta desbindeado de la funcion tras el evento y lo vuelves a bindear con un click del mouse, una pulsación del teclado, un movimiento en la rueda del ratón o un timer para que no haga trigger al mostrar el alert entre otras opciones.
https://plainjs.com/javascript/events/binding-and-unbinding-of-event-handlers-12/
Puedes usar .removeEventListener('evento', nombreDelHandler)

Otra opción es bindear el handler solo al scroll principal como lo harías para un contenedor en html y no a todo el documento, por lo que así no detectaría nuevos objetos ni eventos relacionados con otros scrolls en la página. Ya que tal y como está, si metes 20 scrolls y el tamaño coincide o excede el ejemplo para por ejemplo mostrar ejemplos de un código, imagenes desplazables, etc todos te van a hacer trigger, incluyendo los alert y prompt y no solo al llegar al pie de página como se requiere.

Tema a parte, el performance se reduce mucho ya que la llamada al handler se hace continuamente al ir desplazando el scroll independientemente de que haga trigger o no del alert, por lo que lo más lógico es ponerle un delay tras detectar cada evento.
Lo haces de forma muy simple añadiendo un booleano para que no se llame a la función scroll tras ser comprobada, y al pasar X milisegundos vuelves a cambiar el valor del booleano para que se vuelva a comprobar.

Usando vanilla:
https://developer.mozilla.org/es/docs/Web/API/Document/scroll_event

Usando Jquery:

Código (javascript) [Seleccionar] Expandir

var scrollEnMovimiento = false;
$(window).scroll(esperaScroll()
{
scrollEnMovimiento = true;
});
setInterval(esperaScroll()
{
if (scrollEnMovimiento)
{
scrollEnMovimiento = false;
//Lo que quieras hacer.
}
}, 200 );
200 es el tiempo de delay en milisegundos.

En la mayoría de navegadores también puedes usar capture con pasive y active para settear true y false.

[EdePC]

- Jeje, es cierto, el Alert() toma el foco y deja inconsistencias, por ejemplo:

-- Presiona la tecla FIN para ir directamente al pie de página y desplazar el scroll al tope final, ocurre que el scroll no se desplaza, la página no se desplaza, se ejecuta el alert(), se acepta el alert() y luego recién se desplaza la página y el scroll.

-- Con el mouse usa el click sostenido para llevar el scroll al tope final, se muestra el alert() tomando el foco pero no se a disparado el evento mouseup (el click se queda sostenido en el scroll), se acepta el alert(), el foco se devuelve al scroll, si se mueve el mouse sobre la barra del scroll este se mueve solo porque tiene el foco y el click sostenido del mouse, hay que volver a dar click en el scroll para quitarle el foco y el click sostenido.

- Por estas cosas no se recomienda usa Alert() apara depuración o testeo, mejor console.log() o escribir en el DOM

[Leguim]

Muchas gracias chicos!