Pregunta Verifique si un usuario se ha desplazado hacia abajo


Estoy creando un sistema de paginación (algo así como Facebook) donde el contenido se carga cuando el usuario se desplaza hacia abajo. Imagino que la mejor manera de hacerlo es encontrar cuando el usuario está en la parte inferior de la página y ejecutar una consulta ajax para cargar más publicaciones.

El único problema es que no sé cómo verificar si el usuario se ha desplazado al final de la página con jQuery. ¿Algunas ideas?

Necesito encontrar una manera de verificar cuando el usuario se haya desplazado al final de la página con jQuery.


556
2017-10-09 22:28


origen


Respuestas:


Utilizar el .scroll() evento en window, Me gusta esto:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

Puedes probarlo aquí, esto toma el desplazamiento superior de la ventana, por lo tanto, cuánto se desplaza hacia abajo, agrega la altura de la ventana visible y comprueba si es igual a la altura del contenido general (document) Si quisieras, en cambio, verificar si el usuario está cerca el fondo, se vería algo como esto:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

Puedes probar esa versión aquísolo ajusta eso 100 a cualquier píxel del fondo sobre el que quieras disparar.


883
2017-10-09 22:34



La respuesta de Nick Craver funciona bien, evite el problema de que el valor de $(document).height() varía según el navegador

Para que funcione en todos los navegadores, use esta función de James Padolsey:

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

en lugar de $(document).height(), para que el código final sea:

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == getDocHeight()) {
           alert("bottom!");
       }
   });

101
2018-05-29 08:42



No estoy exactamente seguro de por qué esto no se ha publicado aún, pero de acuerdo con la documentación de MDN, la forma más simple es mediante el uso de propiedades JavaScript nativas:

element.scrollHeight - element.scrollTop === element.clientHeight

Devuelve verdadero cuando estás en la parte inferior de cualquier elemento desplazable. Entonces simplemente usando javascript:

element.addEventListener('scroll', function(event)
{
    var element = event.target;
    if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        console.log('scrolled');
    }
});

scrollHeight tiene un amplio soporte en navegadores, es decir, 8 para ser más preciso, mientras clientHeight y scrollTop ambos son compatibles con todos. Incluso es decir 6. Esto debería ser seguro para navegador cruzado.


52
2017-12-31 18:13



Para aquellos que usan la solución de Nick y obtienen repetidos alertas / eventos disparando, puedes agregar una línea de código encima del ejemplo de alerta:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

Esto significa que el código solo se activará la primera vez que se encuentre dentro de los 100 píxeles de la parte inferior del documento. No se repetirá si retrocedes hacia arriba y luego hacia abajo, lo que puede o no ser útil dependiendo de para qué estés usando el código de Nick.


43
2017-10-01 16:51



Además de la excelente respuesta aceptada de Nick Craver, puedes acelerar el evento de desplazamiento para que no se active tan frecuentemente. aumentar el rendimiento del navegador:

var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);

$document.ready(function () {

    $window
        .off('scroll', ScrollHandler)
        .on('scroll', ScrollHandler);

});

function ScrollHandler(e) {
    //throttle event:
    clearTimeout(_throttleTimer);
    _throttleTimer = setTimeout(function () {
        console.log('scroll');

        //do work
        if ($window.scrollTop() + $window.height() > $document.height() - 100) {
            alert("near bottom!");
        }

    }, _throttleDelay);
}

37
2018-03-13 10:22



La respuesta de Nick Craver debe modificarse ligeramente para que funcione en iOS 6 Safari Mobile y debería ser:

$(window).scroll(function() {
   if($(window).scrollTop() + window.innerHeight == $(document).height()) {
       alert("bottom!");
   }
});

Cambiando $ (ventana) .height () a window.innerHeight debe hacerse porque cuando la barra de direcciones está oculta se agregan 60px adicionales a la altura de la ventana pero usando $(window).height() hace no reflejar este cambio, mientras se usa window.innerHeight hace.

Nota: Los window.innerHeight propiedad también incluye la altura de la barra de desplazamiento horizontal (si se representa), a diferencia $(window).height() que no incluirá la altura de la barra de desplazamiento horizontal. Esto no es un problema en Mobile Safari, pero podría causar un comportamiento inesperado en otros navegadores o versiones futuras de Mobile Safari. Cambiando == a >=podría arreglar esto para la mayoría de los casos de uso comunes.

Lea más sobre el window.innerHeight propiedad aquí


35
2017-07-03 14:31



Aquí hay un fragmento de código que lo ayudará a depurar su código, probé las respuestas anteriores y descubrí que tenían errores. He probado lo siguiente en Chrome, IE, Firefox, IPad (Safari). No tengo otros instalados para probar ...

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var winElement = $(window)[0];

         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
            alert('bottom');
         }
      });
   });
</script>

Puede haber una solución más simple, pero me detuve en el punto en el que FUNCIONÓ

Si todavía tiene problemas con algún navegador falso, aquí hay algún código para ayudarlo a depurar:

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var details = "";
         details += '<b>Document</b><br />';
         details += 'clientHeight:' + docElement.clientHeight + '<br />';
         details += 'clientTop:' + docElement.clientTop + '<br />';
         details += 'offsetHeight:' + docElement.offsetHeight + '<br />';
         details += 'offsetParent:' + (docElement.offsetParent == null) + '<br />';
         details += 'scrollHeight:' + docElement.scrollHeight + '<br />';
         details += 'scrollTop:' + docElement.scrollTop + '<br />';

         var winElement = $(window)[0];
         details += '<b>Window</b><br />';
         details += 'innerHeight:' + winElement.innerHeight + '<br />';
         details += 'outerHeight:' + winElement.outerHeight + '<br />';
         details += 'pageYOffset:' + winElement.pageYOffset + '<br />';
         details += 'screenTop:' + winElement.screenTop + '<br />';
         details += 'screenY:' + winElement.screenY + '<br />';
         details += 'scrollY:' + winElement.scrollY + '<br />';

         details += '<b>End of page</b><br />';
         details += 'Test:' + (docElement.scrollHeight - winElement.innerHeight) + '=' + winElement.pageYOffset + '<br />';
         details += 'End of Page? ';
         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
             details += 'YES';
         } else {
             details += 'NO';
         }

         $('#test').html(details);
      });
   });
</script>
<div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;">

Espero que esto le ahorre a alguien algo de tiempo.


14
2018-02-19 09:52



Aquí hay un enfoque bastante simple:

elm.onscroll = function() {
    if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) //User has scrolled to the bottom of the element
}

14
2018-03-09 10:19



var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

Calcula la barra de desplazamiento de distancia a la parte inferior del elemento. Igual 0, si la barra de desplazamiento ha llegado a la parte inferior.


9
2017-11-12 22:13