¿Cómo detectar si la ventana del navegador se desplaza hacia abajo?
Necesito detectar si un usuario se desplaza hasta el final de una página. Si están en la parte inferior de la página, cuando agrego contenido nuevo en la parte inferior, los desplazaré automáticamente hasta la nueva parte inferior. Si no están en la parte inferior, están leyendo contenido anterior más arriba en la página, por lo que no quiero desplazarlos automáticamente porque quieren permanecer donde están.
¿Cómo puedo detectar si un usuario se desplaza hasta el final de la página o si se desplaza hacia arriba en la página?
window.onscroll = function(ev) {
if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
// you're at the bottom of the page
}
};
Ver demostración
Código actualizado para compatibilidad con todos los principales navegadores (incluidos 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 actualmente es que window.scrollYno está disponible en IE.
Aquí hay una cita de mdn sobre scrollY:
Para compatibilidad entre navegadores, utilice window.pageYOffset en lugar de window.scrollY.
Y un fragmento de trabajo:
Mostrar fragmento de código
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 tema 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 busca compatibilidad con navegadores antiguos (IE9), utilice el alias window.pageYOffsetque tiene una compatibilidad ligeramente mejor.
Estaba buscando una respuesta pero no encontré una exacta. Aquí hay una solución de 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 busca admitir navegadores más antiguos (IE9), reemplace window.scrollY con window.pageYOffset
