Compruebe si un usuario se ha desplazado hacia abajo

Estoy haciendo un sistema de paginación (como Facebook) donde el contenido se carga cuando el usuario se desplaza hacia abajo. Me imagino que la mejor manera de hacerlo es encontrar cuándo 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 cuándo el usuario se ha desplazado al final de la página con jQuery.

Use el .scroll()evento en window, así:

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

Puede probarlo aquí , esto toma el desplazamiento superior de la ventana, así que cuánto se desplaza hacia abajo, agrega la altura de la ventana visible y verifica si eso es igual a la altura del contenido general ( document). Si quisieras comprobar si el usuario está cerca de la parte inferior, se vería así:

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

Puede probar esa versión aquí , solo ajústela 100a cualquier píxel desde la parte inferior que desee activar.

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(), de modo que el código final es:

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

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

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

Devuelve verdadero cuando está 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');
    }
});

scrollHeighttienen un amplio soporte en navegadores, es decir, 8 para ser más precisos, clientHeighty scrollTopambos son compatibles con todos. Incluso es decir, 6. Esto debería ser seguro para todos los navegadores.

Para aquellos que usan la solución de Nick y reciben alertas repetidas / eventos disparados, puede agregar una línea de código sobre el 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 a menos de 100 px de la parte inferior del documento. No se repetirá si se desplaza hacia arriba y luego hacia abajo, lo que puede o no ser útil según para qué esté usando el código de Nick.

Además de la excelente respuesta aceptada de Nick Craver, puede acelerar el evento de desplazamiento para que no se active con tanta frecuencia, lo que aumenta 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);
}

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

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

Cambiando .height (ventana) $ () a window.innerHeight se debe hacer porque cuando se oculta la barra de dirección de un 60 píxeles adicionales se añaden a la altura de la ventana, pero utilizando $(window).height()no no reflejar este cambio, durante el uso window.innerHeightlo hace.

Nota : La window.innerHeightpropiedad también incluye la altura de la barra de desplazamiento horizontal (si se representa), a diferencia de $(window).height()lo 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 solucionar esto para los casos de uso más comunes.

Lea más sobre la window.innerHeightpropiedad aquí

Aquí hay un enfoque bastante simple

const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight

Ejemplo

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

¿Dónde elmse recupera un elemento de ie document.getElementById?

Aquí hay un fragmento de código que lo ayudará a depurar su código, probé las respuestas anteriores y descubrí que tienen 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 que FUNCIONÓ

Si todavía tiene problemas con algún navegador no autorizado, aquí hay algunos códigos 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 ahorre algo de tiempo a alguien.

Por favor revisa esta respuesta

 window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       console.log("bottom");
    }
};

Puede hacer footerHeight - document.body.offsetHeightpara ver si está cerca del pie de página o llegó al pie de página

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 al fondo.

Estos son mis dos centavos:

$('#container_element').scroll( function(){
        console.log($(this).scrollTop()+' + '+ $(this).height()+' = '+ ($(this).scrollTop() + $(this).height())   +' _ '+ $(this)[0].scrollHeight  );
        if($(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight){
            console.log('bottom found');
        }
    });

JS puro con navegador cruzado y eliminación de rebotes ( rendimiento bastante bueno )

var CheckIfScrollBottom = debouncer(function() {
    if(getDocHeight() == getScrollXY()[1] + window.innerHeight) {
       console.log('Bottom!');
    }
},500);

document.addEventListener('scroll',CheckIfScrollBottom);

function debouncer(a,b,c){var d;return function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f)}}
function getScrollXY(){var a=0,b=0;return"number"==typeof window.pageYOffset?(b=window.pageYOffset,a=window.pageXOffset):document.body&&(document.body.scrollLeft||document.body.scrollTop)?(b=document.body.scrollTop,a=document.body.scrollLeft):document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)&&(b=document.documentElement.scrollTop,a=document.documentElement.scrollLeft),[a,b]}
function getDocHeight(){var a=document;return Math.max(a.body.scrollHeight,a.documentElement.scrollHeight,a.body.offsetHeight,a.documentElement.offsetHeight,a.body.clientHeight,a.documentElement.clientHeight)}

Demostración: http://jsbin.com/geherovena/edit?js,output

PS: Debouncer, getScrollXY, getDocHeightno está escrito por mí

Solo muestro cómo funciona, y cómo lo haré

Mi solución en plain js:

let el=document.getElementById('el');
el.addEventListener('scroll', function(e) {
    if (this.scrollHeight - this.scrollTop - this.clientHeight<=0) {
        alert('Bottom');
    }
});

#el{
  width:400px;
  height:100px;
  overflow-y:scroll;
}

<div id="el">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>

Pruebe esto para la condición de coincidencia si se desplaza hasta el extremo inferior

if ($(this)[0].scrollHeight - $(this).scrollTop() == 
    $(this).outerHeight()) {

    //code for your custom logic

}

Nick responde que está bien, pero tendrá funciones que se repiten mientras se desplaza o no funcionará si el usuario tiene la ventana ampliada. Se me ocurrió una solución fácil solo matemática alrededor de la primera altura y funciona tal como se supone.

    if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
    loadPagination();
    $(".go-up").css("display","block").show("slow");
}

Puedes probar el siguiente código,

$("#dashboard-scroll").scroll(function(){
    var ele = document.getElementById('dashboard-scroll');
    if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){
       console.log('at the bottom of the scroll');
    }
});

Esto proporciona resultados precisos cuando se verifica un elemento desplazable (es decir, no window):

// `element` is a native JS HTMLElement
if ( element.scrollTop == (element.scrollHeight - element.offsetHeight) )
    // Element scrolled to bottom

offsetHeightdebe proporcionar la altura visible real de un elemento (incluido el relleno, el margen y las barras de desplazamiento), y scrollHeightes la altura completa de un elemento, incluidas las áreas invisibles (desbordadas).

jQuery's .outerHeight()debería dar un resultado similar al de JS .offsetHeight: la documentación en MDN para offsetHeightno está clara acerca de su compatibilidad entre navegadores. Para cubrir más opciones, esto es más completo:

var offsetHeight = ( container.offsetHeight ? container.offsetHeight : $(container).outerHeight() );
if  ( container.scrollTop == (container.scrollHeight - offsetHeight) ) {
   // scrolled to bottom
}

En lugar de escuchar el evento de desplazamiento, el uso del Intersection Observer es económico para verificar si el último elemento era visible en la ventana gráfica (eso significa que el usuario se desplazó hacia abajo). También es compatible con IE7 con el polyfill .

var observer = new IntersectionObserver(function(entries){
   if(entries[0].isIntersecting === true)
      console.log("Scrolled to the bottom");
   else
      console.log("Not on the bottom");
}, {
   root:document.querySelector('#scrollContainer'),
   threshold:1 // Trigger only when whole element was visible
});

observer.observe(document.querySelector('#scrollContainer').lastElementChild);

#scrollContainer{
  height: 100px;
  overflow: hidden scroll;
}

<div id="scrollContainer">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
</div>

Todas estas soluciones no me funcionan en Firefox y Chrome, por lo que utilizo funciones personalizadas de Miles O'Keefe y meder omuraliev de esta manera:

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
    );
}

function getWindowSize()
{
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth, myHeight];
}

$(window).scroll(function()
{
    if($(window).scrollTop() + getWindowSize()[1] == getDocHeight())
    {
        alert("bottom!");
    }
});

Aquí están mis dos centavos ya que la respuesta aceptada no funcionó para mí.

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;

Déjame mostrarte acercamiento sin JQuery. Función JS simple:

function isVisible(elem) {
  var coords = elem.getBoundingClientRect();
  var topVisible = coords.top > 0 && coords.top < 0;
  var bottomVisible = coords.bottom < shift && coords.bottom > 0;
  return topVisible || bottomVisible;
}

Breve ejemplo de cómo usarlo:

var img = document.getElementById("pic1");
    if (isVisible(img)) { img.style.opacity = "1.00";  }

Usé @ddanone answear y agregué la llamada Ajax.

$('#mydiv').on('scroll', function(){
  function infiniScroll(this);
});

function infiniScroll(mydiv){
console.log($(mydiv).scrollTop()+' + '+ $(mydiv).height()+' = '+ ($(mydiv).scrollTop() + $(mydiv).height())   +' _ '+ $(mydiv)[0].scrollHeight  );

if($(mydiv).scrollTop() + $(mydiv).height() == $(mydiv)[0].scrollHeight){
    console.log('bottom found');
    if(!$.active){ //if there is no ajax call active ( last ajax call waiting for results ) do again my ajax call
        myAjaxCall();
    }
}

}

Para detener la alerta repetida de la respuesta de Nick

ScrollActivate();

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

Google Chrome da la altura completa de la página si llamas $(window).height()

En su lugar, use window.innerHeightpara recuperar la altura de su ventana. La verificación necesaria debe ser:

if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
    console.log("reached bottom!");
}

Aparentemente, lo que funcionó para mí fue 'cuerpo' y no 'ventana' como esta:

$('body').scroll(function() {


 if($('body').scrollTop() + $('body').height() == $(document).height()) {
     //alert at buttom
 }
 });

para compatibilidad con navegadores cruzados use:

  function getheight(){
    var doc = document;
    return  Math.max(
        doc.body.scrollHeight, doc.documentElement.scrollHeight,
        doc.body.offsetHeight, doc.documentElement.offsetHeight,
        doc.body.clientHeight, doc.documentElement.clientHeight

        );
   }

y luego en lugar de $ (document) .height () llama a la función getheight ()

$('body').scroll(function() {


   if($('body').scrollTop() + $('body').height() == getheight()  ) {
     //alert at bottom
 }
});

para uso cerca del fondo:

$('body').scroll(function() {


if($('body').scrollTop() + $('body').height() > getheight() -100 ) {
    //alert near bottom
 }
 });