¿Cómo puedo determinar, sin usar jQuery o cualquier otra biblioteca de JavaScript, si un div con una barra de desplazamiento vertical se desplaza hasta el final?
Mi pregunta no es cómo desplazarse hasta el final. Yo se como hacer eso. Quiero determinar si el div ya se ha desplazado hacia la parte inferior.
Esto no funciona:
if (objDiv.scrollTop == objDiv.scrollHeight)
Respuestas:
Estás bastante cerca de usar scrollTop == scrollHeight.
scrollTop se refiere a la parte superior de la posición de desplazamiento, que será scrollHeight - offsetHeight
Tu declaración if debería verse así (no olvides usar triple igual):
if( obj.scrollTop === (obj.scrollHeight - obj.offsetHeight))
{
}
Editar: Corregí mi respuesta, estaba completamente mal
scrollToppuede ser no integral, por lo que esto requiere cierta tolerancia (digamos obj.scrollHeight - obj.offsetHeight - obj.scrollTop < 1) para funcionar en todas las circunstancias. Ver stackoverflow.com/questions/5828275/…
document.body.scrollHeightigual document.body.offsetHeighten mi instancia (Chrome)
Para obtener los resultados correctos al tener en cuenta cosas como la posibilidad de un borde, una barra de desplazamiento horizontal y / o un recuento de píxeles flotantes, debe usar ...
el.scrollHeight - el.scrollTop - el.clientHeight < 1
NOTA: DEBE usar clientHeight en lugar de offsetHeight si desea obtener los resultados correctos. offsetHeight le dará resultados correctos solo cuando el no tenga un borde o barra de desplazamiento horizontal
@scroll="scrolling"luego en los métodos scrolling(event) { event.target // as el in the answer }Buena suerte
Un poco tarde para esta fiesta, pero ninguna de las respuestas anteriores parece funcionar particularmente bien cuando ...
Para adaptarse a todas las eventualidades, deberá redondear la posición de desplazamiento calculada:
Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight
Devuelve verdadero si un elemento está al final de su desplazamiento, falso si no lo está.
element.scrollHeight - element.scrollTop === element.clientHeight
document.body.scrollHeighty document.bodyclientHeighttienen el mismo valor, por lo que la expresión nunca es verdadera.
<!DOCTYPE HTML>
<html>
<head>
<title>JQuery | Detecting when user scrolls to bottom of div.
</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
Data Center
</h1>
<p id="data_center" style="font-size: 17px; font-weight: bold;"></p>
<center>
<div class="div" style="width:200px; height:150px; overflow:auto;">
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
</div>
</center>
<script>
$('#data_center').text('Scroll till bottom to get alert!');
jQuery(function($) {
$('.div').on('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert('End of DIV has reached!');
}
});
});
</script>
</body>
</html>
A mí me funciona, espero, esto también te ayudará. Gracias.
Bueno, yo me pregunté lo mismo, y encontré así, aquí pongo un ejemplo usando un evento:
let scrollableElement = document.querySelector(".elementScrollable")
scrollableElement.addEventListener("scroll",function(event){
if(event.target.scrollTop === event.target.scrollTopMax){
console.log("The scroll arrived at bottom")
}
})
Esta funciona para mí. Un enfoque ligeramente diferente.
if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
return 'scrollOnTheBottom';
}
La solución que encontré en https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div/ funcionó para mí, espero que también funcione para ti .
$(window).on('scroll', function() {
if ($(window).scrollTop() >= $(
'.div').offset().top + $('.div').
outerHeight() - window.innerHeight) {
alert('You reached the end of the DIV');
}
});