Compruebe si un usuario se ha desplazado hacia abajo

668

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.

Johnny
fuente
Es curioso, estoy tratando de averiguar qué función se llama cuando me desplazo hacia abajo, para poder bloquear esta "característica" enfurecedora.
endolith
Para una solución React.js, este enlace podría ayudar: stackoverflow.com/a/53158893/4265546
raksheetbhat

Respuestas:

1024

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.

Nick Craver
fuente
32
Como siempre llegas allí antes que yo. De todos modos, para el OP, si tiene un contenedor de publicaciones, use su ID en lugar de "ventana", también, es posible que desee cambiar el último .height () a scrollHeight
Christian
44
Firefox llama a alerta ("¡abajo!"); muchas veces (funciona bien con cromo y safari)
Marco Matarazzi
3
es un poco defectuoso, si haces una console.log()alerta en lugar de una alerta, a veces repite el comando.
Jürgen Paul
19
@KevinVella Vella combinación buena es utilizar esto con _.debounce () en la utilidad de subrayado para evitar que la cocción hasta que el usuario ha dejado de desplazamiento - underscorejs.org/#debounce -
JohnnyFaldo
3
@NickCraver ¿hay alguna implementación js pura disponible?
Dewsworld
116

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!");
       }
   });
Miles O'Keefe
fuente
66
Se ha actualizado con una función de versión ligeramente comprimida 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); }
Drew
eso me alerta cuando llego a la parte superior, no a la parte inferior (Chrome).
Damien Roche
Puede ser mejor usarlo en minlugar de hacerlo max, especialmente si hay un margen de todos modos, para evitar evitar accidentalmente que el usuario se desplace hacia lo que crees que es la parte inferior de la página.
Solomon Ucko
104

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.

Félix Gagnon-Grenier
fuente
1
Tenga en cuenta que en algunas situaciones este puede no ser el caso. Firefox 47 informa que un cliente de área de texto tiene una altura de 239, mientras que la ecuación anterior da 253 cuando se desplaza hacia abajo. ¿Quizás el relleno / borde o algo lo está afectando? De cualquier manera, agregar algo de margen de maniobra no estaría de más var isAtBottom = ( logField.scrollHeight - logField.scrollTop <= logField.clientHeight + 50 );. Esto es útil para el desplazamiento automático de un campo solo si ya está en la parte inferior (para que el usuario pueda examinar manualmente una parte específica de un registro en tiempo real sin perder su lugar, etc.).
Beejor
Agregaría que es posible que devuelva falsos negativos ya que un lado podría devolver un decimal pequeño mientras que el otro lado devuelve un número entero (por ejemplo, 200.181819304947y 200). Agregué una Math.floor()para ayudar a lidiar con eso, pero no sé qué tan confiable será.
Hanna
1
Para mí, esto no funciona entre navegadores. Obtengo resultados completamente diferentes en Chrome en comparación con Firefox.
Tadej
1
Intenté esto en el elemento <body>, y esto se dispara cuando el navegador se desplaza hacia ARRIBA, no hacia abajo.
Chris Sobolewski
10
Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) <= 3.0(reemplace 3.0 con la tolerancia de píxeles que considere apropiada para sus circunstancias). Este es el camino a seguir porque (A) clientHeight, scrollTopy clientHeightestán todos redondeados, lo que podría conducir a un error de 3 píxeles si todos se alinean, (B) 3 píxeles apenas son visibles para el usuario, por lo que el usuario puede pensar que algo está mal en su sitio cuando "piensan" están en la parte inferior de la página, cuando en realidad no lo están, y (C) ciertos dispositivos (especialmente los que no tienen mouse) pueden tener un comportamiento extraño al desplazarse.
Jack Giffin
50

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.

Tim Carr
fuente
1
¡Hubiera comentado y dicho dónde está esa línea de código, ya que es relevante para la respuesta de otra persona, pero +1 por la intención!
Nate-Wilkins
Lo siento, no pude (y aún no puedo) ver cómo agregar un comentario a la respuesta (como puedo aquí).
Tim Carr
Sí, los nuevos usuarios no pueden agregar un comentario a las publicaciones a menos que obtengas más representantes.
Nate-Wilkins
Fuera del primero si pudieras poner un valor diferente si eso prueba si el cambio que deseas que el script haga, digamos que una clase se ha aplicado a un div. Esto haría que el segundo anidado si no se ejecuta si ya se ha ejecutado.
1934286
¿Cómo puedo seleccionar una identificación div particular en lugar de la ventana completa?
James Smith
40

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);
}
George Filippakos
fuente
Probablemente debería señalarse que esto requiere Underscore.js: underscorejs.org . Sin embargo, es un muy buen punto. El evento de desplazamiento casi siempre debería ser acelerado para evitar serios problemas de rendimiento.
Jude Osborn
Tal vez soy solo yo y podría usar algunos puntos de referencia, pero no me gusta la idea de invocar clearTimeout y setTimeout en cada evento de desplazamiento. Emitiría 1 setTimeout y agregaría algunos guardias en ese controlador. Probablemente sea solo una microoptimización (si es que lo hay).
Mueca de desesperación
Esta es una muy buena adición! Puedo pensar en una mejora adicional. Actualmente, la función que verifica la altura no se ejecutará si el usuario continúa desplazándose. Si esto es un problema (por ejemplo, si desea activar la función cuando el usuario se desplaza hasta la mitad, independientemente de si sigue desplazándose), puede asegurarse fácilmente de que la función realmente se llama mientras se prohíbe varias llamadas durante el intervalo elegido. Aquí hay una esencia para mostrarlo. gist.github.com/datacarl/7029558
datacarl
¿Qué? ¿Invocar una carga de maquinaria para evitar un cálculo simple? No veo cómo eso es más eficiente en absoluto
Rambatino
37

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í

Yosi
fuente
window.innerHeight tenía más sentido para lo que estaba tratando de lograr, gracias!
Amir5000
¿Cómo obtener la altura restante después del desplazamiento?
OPV
21

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?

Frederik Witte
fuente
17

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.

Garra
fuente
La mejor respuesta para Vanilla js, sin solución jQuery. Usovar docElement = document.documentElement; var winElement = window
jperelli
Esto en 2019. En lugar de winElement.pageYOffsetusted también puede usar winElement.scrollY.
Noel Abrahams
15

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

Junaid Qadir
fuente
12
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.

Vasyl Gutnyk
fuente
1
Hice lo siguiente y trabajé perfectamente. Gracias. var shouldScroll = (elem.scrollHeight - elem.scrollTop - elem.clientHeight) == 0;
jiminssy
11

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');
        }
    });
ddanone
fuente
Intenté usar su solución, funciona bien, pero en los casos en que el elemento tiene relleno, no funciona porque calcula la altura pura del elemento, sin incluir el relleno, para resolver esto, cambié esto $(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight=>$(this).scrollTop() + $(this).outerHeight(true) >= $(this)[0].scrollHeight
Taras Chernata
6

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é

l2aelba
fuente
Perfecto. Probado en Firefox y Chrome
Erlisar Vasquez
Recibo el siguiente error: se esperaban 3 argumentos, pero obtuve 2. No se proporcionó un argumento 'c'.
Sábado
6

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>

Bakos Bence
fuente
4

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

}
Hiren Patel
fuente
3

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");
}
Florin Andrei
fuente
3

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');
    }
});
Shahrukh Anwar
fuente
2

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
}
Yuval A.
fuente
intente Math.floor(element.scrollTop) === element.scrollHeight - element.offsetHeighten caso de que el scrollTop sea un decimal sin el que no funcionaráMath.floor()
Michail Michailidis
2

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>

StefansArya
fuente
El problema con Intersection Observer es que si la ventana de inicio es relativamente pequeña (digamos un diseño básico antes de buscar imágenes sin barra de desplazamiento), la devolución de llamada del observador se activa de inmediato. El oyente de desplazamiento realmente espera a que una persona se desplace. Y la barra de desplazamiento no aparecerá antes de que se obtenga el primer lote de imágenes, etc. Entonces Intersection Observer no es una solución única.
Aleks
@Aleks Puede llamar al .observe(...)oyente de un evento como cuando el usuario se desplaza / toca su contenedor de desplazamiento para que no se active de inmediato.
StefansArya
1

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!");
    }
});
hayj
fuente
1

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;
Vince Panuccio
fuente
0

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";  }
Alexei Zababurin
fuente
55
Esto no responde la pregunta. La pregunta era cómo detectar que los usuarios han desplazado la ventana hasta el final. Su código está verificando si un elemento en particular está a la vista.
Peter Hall el
0

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

}

Henrique C.
fuente
0

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!");
        }
    });
}
Arun Prasad ES
fuente
0

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!");
}
alierdogan7
fuente
0

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