Necesito detectar si un usuario se desplaza al final de una página. Si están en la parte inferior de la página, cuando agregue contenido nuevo a la parte inferior, los desplazaré automáticamente a la parte inferior nueva. Si no están en la parte inferior, están leyendo el contenido anterior más arriba en la página, por lo que no quiero desplazarlos automáticamente ya que quieren permanecer donde están.

¿Cómo puedo detectar si un usuario se desplaza al final de la página o si se desplaza más arriba en la página?

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
};

Ver demo

Código actualizado para todos los principales navegadores compatibles (incluye IE10 e IE11)

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

El problema con la respuesta aceptada actual es que window.scrollY no está disponible en IE.

Aquí hay una cita de mdn con respecto a scrollY:

Para la compatibilidad entre navegadores, use window.pageYOffset en lugar de window.scrollY.

Y un fragmento de trabajo:

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset ) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Nota para mac

Según el comentario de @ Raphaël, hubo un problema en mac debido a un pequeño desplazamiento.
La siguiente condición actualizada funciona:

(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2

No tuve la oportunidad de probarlo más, si alguien puede comentar sobre este problema específico, será genial.

La respuesta aceptada no funcionó para mí. Esto hizo:

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
      // you're at the bottom of the page
      console.log("Bottom of page");
    }
};

Si está buscando admitir navegadores antiguos (IE9) use el alias window.pageYOffsetque tiene un soporte ligeramente mejor.

Estaba buscando una respuesta pero no encontré una exacta. Aquí hay una solución javascript pura que funciona con las últimas versiones de Firefox, IE y Chrome en el momento de esta respuesta:

// document.body.scrollTop alone should do the job but that actually works only in case of Chrome.
// With IE and Firefox it also works sometimes (seemingly with very simple pages where you have
// only a <pre> or something like that) but I don't know when. This hack seems to work always.
var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

// Grodriguez's fix for scrollHeight:
// accounting for cases where html/body are set to height:100%
var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;

// >= is needed because if the horizontal scrollbar is visible then window.innerHeight includes
// it and in that case the left side of the equation is somewhat greater.
var scrolledToBottom = (scrollTop + window.innerHeight) >= scrollHeight;

// As a bonus: how to scroll to the bottom programmatically by keeping the horizontal scrollpos:
// Since window.innerHeight includes the height of the horizontal scrollbar when it is visible
// the correct vertical scrollTop would be
// scrollHeight-window.innerHeight+sizeof(horizontal_scrollbar)
// Since we don't know the visibility/size of the horizontal scrollbar
// we scroll to scrollHeight that exceeds the value of the
// desired scrollTop but it seems to scroll to the bottom with all browsers
// without problems even when the horizontal scrollbar is visible.
var scrollLeft = (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft;
window.scrollTo(scrollLeft, scrollHeight);

Esto funciona

window.onscroll = function() {

    // @var int totalPageHeight
    var totalPageHeight = document.body.scrollHeight; 

    // @var int scrollPoint
    var scrollPoint = window.scrollY + window.innerHeight;

    // check if we hit the bottom of the page
    if(scrollPoint >= totalPageHeight)
    {
        console.log("at the bottom");
    }
}

Si está buscando admitir navegadores antiguos (IE9), reemplace window.scrollY con window.pageYOffset

Acabo de empezar a mirar esto y las respuestas aquí me ayudaron, así que gracias por eso. Me he expandido un poco para que el código esté seguro hasta IE7:

Espero que esto sea útil para alguien.

Aquí, tiene un violín;)

    <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            height: 100px;
            border-bottom: 1px solid #ddd;
        }

        div:nth-child(even) {
            background: #CCC
        }

        div:nth-child(odd) {
            background: #FFF
        }

    </style>
</head>

<body>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</body>

<script type="text/javascript">
console.log("Doc Height = " + document.body.offsetHeight);
console.log("win Height = " + document.documentElement.clientHeight);
window.onscroll = function (ev) {
    var docHeight = document.body.offsetHeight;
    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;

    var winheight = window.innerHeight;
    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;

    var scrollpoint = window.scrollY;
    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;

    if ((scrollpoint + winheight) >= docHeight) {
        alert("you're at the bottom");
    }
};
</script>
</html>

Si está configurando height: 100%un contenedor <div id="wrapper">, el siguiente código funciona (probado en Chrome):

var wrapper = document.getElementById('wrapper');

wrapper.onscroll = function (evt) {
  if (wrapper.scrollTop + window.innerHeight >= wrapper.scrollHeight) {
    console.log('reached bottom!');
  }
}

window.onscroll = function(ev) {
    if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

Esta respuesta solucionará casos extremos, esto es porque pageYOffsetes doublewhile innerHeighty offsetHeightarelong , por lo que cuando el navegador le brinda la información, es posible que le falte un píxel. Por ejemplo: en la parte inferior de la página tenemos

cierto window.innerHeight = 10.2

cierto window.pageYOffset = 5.4

cierto document.body.offsetHeight = 15.6

Nuestro cálculo se convierte en: 10 + 5.4> = 16 que es falso

Para solucionar esto podemos hacer Math.ceilen el pageYOffsetvalor.

Espero que ayude.

si amas a jquery

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() >= $(document).height()) {
    // doSomethingHere();
  }
});

Puedes mirar el desplazamiento infinito de jquery:

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

Parece que hace lo que está pidiendo, suponiendo que esté dispuesto a usar la biblioteca jquery y sin esperar un estricto método JS puro.

Sorprendentemente, ninguna de las soluciones funcionó para mí. Creo que es porque mi cssestaba en mal estado y bodyno envolvía todo el contenido cuando lo usaba height: 100%(todavía no sé por qué). Sin embargo, mientras buscaba una solución, se me ocurrió algo bien ... básicamente lo mismo, pero tal vez valga la pena mirarlo: soy nuevo en la programación, así que lo siento si está haciendo lo mismo más lento, es menos compatible o algo así ese...

window.onscroll = function(evt) {
  var check = (Element.getBoundingClientRect().bottom - window.innerHeight <= 0) ? true : false;
  if (check) { console.log("You're at the bottom!"); }
};

$(document).ready(function(){
    $('.NameOfYourDiv').on('scroll',chk_scroll);
});

function chk_scroll(e)
{
    var elem = $(e.currentTarget);
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) 
    {
        alert("scrolled to the bottom");
    }

}

const handleScroll = () => {
    if (Math.round(window.scrollY + window.innerHeight) >= Math.round(document.body.scrollHeight)) {
        onScroll();
    }
};

Este código también funcionó para mí en Firefox e IE.

Uso defaultViewy documentElementcon fragmento de código funcional incrustado:

const { defaultView } = document;
const { documentElement } = document;
const handler = evt => requestAnimationFrame(() => {
  const hitBottom = (() => (defaultView.innerHeight + defaultView.pageYOffset) >= documentElement.offsetHeight)();
  hitBottom
    ? console.log('yep')
    : console.log('nope')
});
document.addEventListener('scroll', handler);

<pre style="height:110vh;background-color:fuchsia">scroll down</pre>

Puede verificar si el resultado combinado de la altura de la ventana y la parte superior de desplazamiento es mayor que el del cuerpo

if (window.innerHeight + window.scrollY >= document.body.scrollHeight) {}

Tuve que encontrar una forma (en Java) de desplazarme sistemáticamente hacia abajo en busca de un componente para el que no conocía el XPath correcto (historia larga, así que solo sigue el juego). Como acabo de decir, necesitaba desplazarme hacia abajo mientras buscaba un componente y detenerme cuando se encontraba el componente o se llegaba al final de la página.

El siguiente fragmento de código controla el desplazamiento hacia la parte inferior de la página:

JavascriptExecutor js = (JavascriptExecutor) driver;
boolean found = false;
long currOffset = 0;
long oldOffset = 0;
do
{
    oldOffset = currOffset;
    // LOOP to seek the component using several xpath regexes removed
    js.executeScript("window.scrollBy(0, 100)");
    currOffset = (Long)js.executeScript("var offset = window.window.pageYOffset; return offset;");
} while (!found && (currOffset != oldOffset));

Por cierto, la ventana se maximiza antes de que se ejecute este fragmento de código.

La respuesta aceptada no funcionó para mí. Esto hizo:

const element = document.createElement('div');
document.body.appendChild(element);
document.addEventListener('scroll', () => {
    const viewportHeight = window.innerHeight;
    const distance = element.getBoundingClientRect().top;
    if (Math.floor(distance) <= viewportHeight) {
        console.log('yep')
    } else {
        console.log('nope')
    }
})

Encontré dos soluciones que me funcionaron:

  window.addEventListener('scroll', function(e) {
    if (
      window.innerHeight + document.documentElement.scrollTop ===
      document.documentElement.offsetHeight
    ) {
      console.log('You are at the bottom')
    }
  })

Y el otro:

  window.addEventListener('scroll', function(e) {
    if (
      window.innerHeight + window.pageYOffset ===
      document.documentElement.offsetHeight
    ) {
      console.log('You are at the bottom')
    }
  })