javascript - remove - Detectando cuando el usuario se desplaza a la parte inferior del div con jQuery

parent jquery

Question

Tengo una caja div (llamada flujo) con una cantidad variable de contenido dentro. Este divbox tiene desbordamiento configurado en auto.

Ahora, lo que estoy tratando de hacer, es que cuando el uso se desplace hacia la parte inferior de esta caja DIV, cargue más contenido en la página, sé cómo hacerlo (cargar el contenido) pero no sé cómo hacerlo. detectar cuando el usuario se ha desplazado a la parte inferior de la etiqueta div? Si quisiera hacerlo para toda la página, tomaría .scrollTop y lo restaría de .height.

Pero parece que no puedo hacer eso aquí?

He intentado tomar .scrollTop del flujo, y luego envolver todo el contenido dentro de un div llamado internal, pero si tomo el InternalHeight del flujo, devuelve 564px (el div se establece en 500 como altura) y la altura de "innner" devuelve 1064, y el scrolltop, cuando está en la parte inferior de la div, dice 564.

¿Que puedo hacer?

Answer 1

Aquí hay otra versión.

El código de tecla es la función scroller () que toma la entrada como la altura del div que contiene la sección de desplazamiento, usando overflow: scroll. Se aproxima a 5px desde la parte superior o 10px desde la parte inferior como en la parte superior o inferior. De lo contrario es demasiado sensible. Parece que 10px es sobre el mínimo. Verás que agrega 10 a la altura div para obtener la altura inferior. Asumo que 5px podría funcionar, no probé extensivamente. YMMV. scrollHeight devuelve la altura del área de desplazamiento interior, no la altura mostrada del div, que en este caso es de 400 px.

<?php
$scrolling_area_height=400;
echo ''
<script type="text/javascript">
function scroller(ourheight) {
var ourtop=document.getElementById(/'scrolling_area/').scrollTop;
if (ourtop > (ourheight-/'''.($scrolling_area_height+10).''/')) {
alert(/'at the bottom; ourtop:/'+ourtop+/' ourheight:/'+ourheight);
}
if (ourtop <= (5)) {
alert(/'Reached the top/');
}
}
</script>
<style type="text/css">
.scroller {
display:block;
float:left;
top:10px;
left:10px;
height:''.$scrolling_area_height.'';
border:1px solid red;
width:200px;
overflow:scroll;
}
</style>
$content="your content here";
<div id="scrolling_area" class="scroller">
onscroll="var ourheight=document.getElementById(/'scrolling_area/').scrollHeight;
scroller(ourheight);"
>''.$content.''
</div>'';
?>

Answer 2

Aunque la pregunta se hizo hace 5,5 años, todavía es más que relevante en el contexto UI / UX de hoy. Y me gustaría añadir mis dos centavos.

var element = document.getElementById(''flux'');
if (element.scrollHeight - element.scrollTop === element.clientHeight)
{
// element is at the end of its scroll, load more content
}

Fuente: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

Answer 3

Chicos, esta es la solución al problema del zoom, funciona con todos los niveles de zoom, en caso de que lo necesite:

if ( Math.abs(elem.offset().top) + elem.height() + elem.offset().top >= elem.outerHeight() ) {
console.log("bottom");
// We''re at the bottom!
}
});
}

Answer 4

Encontré una solución que cuando te desplazas por la ventana y al final de un div mostrado desde abajo, te alerta.

$(window).bind(''scroll'', function() {
if($(window).scrollTop() >= $(''.posts'').offset().top + $(''.posts'').outerHeight() - window.innerHeight) {
alert(''end reached'');
}
});

En este ejemplo, si se desplaza hacia abajo cuando finaliza div ( .posts ), .posts una alerta.

Answer 5

Hay algunas propiedades / métodos que puedes usar:

$().scrollTop()//how much has been scrolled
$().innerHeight()// inner height of the element
DOMElement.scrollHeight//height of the content of the element

Así que puedes tomar la suma de las dos primeras propiedades, y cuando es igual a la última propiedad, has llegado al final:

jQuery(function($) {
$(''#flux'').on(''scroll'', function() {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert(''end reached'');
}
})
});

http://jsfiddle.net/doktormolle/w7X9N/

Edición: He actualizado ''enlazar'' a ''en'' según:

A partir de jQuery 1.7, el método .on () es el método preferido para adjuntar controladores de eventos a un documento.

Answer 6

No estoy seguro de si es de alguna ayuda, pero así es como lo hago.

Tengo un panel de índice que es más grande que la ventana y lo dejé desplazarse hasta el final de este índice. Luego lo arreglo en posición. El proceso se invierte una vez que se desplaza hacia la parte superior de la página.

Saludos.

<style type="text/css">
.fixed_Bot {
position: fixed;
bottom: 24px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var sidebarheight = $(''#index'').height();
var windowheight = $(window).height();
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if (scrollTop >= sidebarheight - windowheight){
$(''#index'').addClass(''fixed_Bot'');
}
else {
$(''#index'').removeClass(''fixed_Bot'');
}
});
});
</script>

Answer 7

Si alguien obtiene scrollHeight como undefined , seleccione el primer subelemento de los elementos: mob_top_menu[0].scrollHeight

Answer 8

Si necesita usar esto en un div que tiene un desbordamiento como oculto o de desplazamiento, algo como esto puede ser lo que necesita.

if ($(''#element'').prop(''scrollHeight'') - $(''#element'').scrollTop() <= Math.ceil($(''#element'').height())) {
at_bottom = true;
}

Descubrí que se necesitaba ceil porque el prop scrollHeight parece redondearse, o tal vez por alguna otra razón que hace que esto se desactive en menos de 1.

Answer 9

Si no está utilizando la función Math.round (), la solución suggested por Dr.Molle no funcionará en algunos casos cuando una ventana del navegador tenga un zoom.

Por ejemplo, $ (this) .scrollTop () + $ (this) .innerHeight () = 600

$ (esto) [0] .scrollHeight rendimientos = 599.99998

600> = 599.99998 falla.

Aquí está el código correcto:

jQuery(function($) {
$(''#flux'').on(''scroll'', function() {
if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {
alert(''end reached'');
}
})
});

También puede agregar algunos píxeles de margen extra si no necesita una condición estricta

var margin = 4
jQuery(function($) {
$(''#flux'').on(''scroll'', function() {
if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10) - margin) {
alert(''end reached'');
}
})
});

Answer 10

Solo una nota adicional aquí, ya que encontré esto al buscar una solución para un div fijo que quiero desplazar. Para mi escenario, encontré que es preferible tener en cuenta el relleno en la división para poder alcanzar el final exactamente. Así que ampliando la respuesta de @ Dr.Molle agrego lo siguiente

$(''#flux'').bind(''scroll'', function() {
var scrollPosition = $(this).scrollTop() + $(this).outerHeight();
var divTotalHeight = $(this)[0].scrollHeight
+ parseInt($(this).css(''padding-top''), 10)
+ parseInt($(this).css(''padding-bottom''), 10)
+ parseInt($(this).css(''border-top-width''), 10)
+ parseInt($(this).css(''border-bottom-width''), 10);
if( scrollPosition == divTotalHeight )
{
alert(''end reached'');
}
});

Eso te dará la ubicación precisa, incluido el relleno y los bordes

Answer 11

esto funcionó para mí aunque

$(window).scroll(function() {
if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - $(''#divID'').innerHeight())) {
console.log(''div reached'');
}
});

Answer 12

$(window).on("scroll", function() {
//get height of the (browser) window aka viewport
var scrollHeight = $(document).height();
// get height of the document
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
// code to run when scroll to bottom of the page
}
});

This es el código en github.