open - Javascript: ¿Cómo detectar si la ventana del navegador se desplaza hacia abajo?
window.open en la misma ventana (11)
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 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
Basado en el comentario de @ Raphaël, hubo un problema en mac debido a una pequeña compensación.
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.
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 en la parte inferior, los desplazaré automáticamente a la nueva parte inferior. 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 desplazó hacia arriba en la página?
Empecé 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 todo el camino de regreso a IE7:
Espero que esto sea útil para alguien.
<!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>
Estaba buscando una respuesta pero no he encontrado una respuesta 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 scrollHeight, totalHeight;
scrollHeight = document.body.scrollHeight;
totalHeight = window.scrollY + window.innerHeight;
if(totalHeight >= scrollHeight)
{
console.log("at the bottom");
}
}
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");
}
};
Puedes mirar el desplazamiento infinito de jquery:
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
Lo cual suena como que hace lo que estás pidiendo, suponiendo que estés dispuesto a usar la biblioteca jquery y no esperando un estricto método JS puro.
Si está configurando la height: 100% en algún contenedor <div id="wrapper"> , entonces 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!'');
}
}
Sorprendentemente, ninguna de las soluciones funcionó para mí. Creo que es porque mi css estaba en mal estado, y el body no envolvía todo el contenido cuando usaba height: 100% (todavía no sé por qué). Sin embargo, mientras busco una solución, he encontrado algo bueno ... básicamente lo mismo, pero tal vez valga la pena mirarlo. Soy nuevo en la programación, lo siento tanto si lo hace más lento, tiene menos soporte 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");
}
}
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á los casos pageYOffset , esto es porque pageYOffset es double mientras que innerHeight y offsetHeight son long , por lo que cuando el navegador te da la información, es posible que tengas un píxel corto. Por ejemplo: en la parte inferior de la página tenemos
true window.innerHeight = 10.2
true window.pageYOffset = 5.4
verdadero document.body.offsetHeight = 15.6
Nuestro cálculo se convierte en: 10 + 5.4> = 16 que es falso
Para solucionar esto, podemos hacer Math.ceil en el valor pageYOffset .
Espero que ayude.
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you''re at the bottom of the page
}
};