¿Cómo puedo determinar si un div se desplaza hasta la parte inferior?

Question 1

¿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)

Question 2

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

Question 3

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

Question 4

Un poco tarde para esta fiesta, pero ninguna de las respuestas anteriores parece funcionar particularmente bien cuando ...

La escala de pantalla se aplica al sistema operativo para pantallas UHD
La escala / zoom se aplica al navegador

Para adaptarse a todas las eventualidades, deberá redondear la posición de desplazamiento calculada:

Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight

Question 5

Devuelve verdadero si un elemento está al final de su desplazamiento, falso si no lo está.

element.scrollHeight - element.scrollTop === element.clientHeight

Red de desarrolladores de Mozilla

Question 6

<!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.

Question 7

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")
  }
})

Question 8

Esta funciona para mí. Un enfoque ligeramente diferente.

if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
    return 'scrollOnTheBottom';
}

Question 9

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'); 
        } 
});

Answer 1

84

¿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)

javascript scroll scrollbar Bjorn
fuente

solo adivinando aquí si (objDiv.scrollTop> objDiv.scrollHeight) Y puede ser necesario reducir de scrollHeight el tamaño de la flecha de desplazamiento (digamos 20px)

Itay Moav -Malimovka

algo de documentación: developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight ... ... ... developer.mozilla.org/en-US/docs/Web/API/HTMLElement/… ... ... ... api.jquery.com/height ... ... ... api.jquery.com/innerheight ... ... ... api.jquery.com/outerheight

Muhammad Umer

Answer 2

solo adivinando aquí si (objDiv.scrollTop> objDiv.scrollHeight) Y puede ser necesario reducir de scrollHeight el tamaño de la flecha de desplazamiento (digamos 20px)

Itay Moav -Malimovka

Answer 3

algo de documentación: developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight ... ... ... developer.mozilla.org/en-US/docs/Web/API/HTMLElement/… ... ... ... api.jquery.com/height ... ... ... api.jquery.com/innerheight ... ... ... api.jquery.com/outerheight

Muhammad Umer

Answer 4

105

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

James Davies
fuente

4

Eso casi funciona, scrollHeight-offsetHeight no es exactamente el mismo valor que scrollTop, pero después de probar su código, si lo requiero, si esa diferencia es menos de 5 píxeles para que sea la parte inferior, obtengo el comportamiento que quiero.

Bjorn

1

esto no es exacto. obj.borderWidth debe considerarse

bucle

2

prefiero esta respuesta: stackoverflow.com/questions/5828275/…

Chris

3

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/…

Chris Martin

tal vez tenga algo que ver con los elementos fijos en mi diseño o algo extraño que estoy haciendo, pero la única vez que esto se evalúa como verdadero es cuando me desplazo hasta la parte superior. Esto se debe a que es document.body.scrollHeightigual document.body.offsetHeighten mi instancia (Chrome)

Evan de la Cruz

Answer 5

4

Eso casi funciona, scrollHeight-offsetHeight no es exactamente el mismo valor que scrollTop, pero después de probar su código, si lo requiero, si esa diferencia es menos de 5 píxeles para que sea la parte inferior, obtengo el comportamiento que quiero.

Bjorn

Answer 6

1

esto no es exacto. obj.borderWidth debe considerarse

bucle

Answer 7

2

prefiero esta respuesta: stackoverflow.com/questions/5828275/…

Chris

Answer 8

3

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/…

Chris Martin

Answer 9

tal vez tenga algo que ver con los elementos fijos en mi diseño o algo extraño que estoy haciendo, pero la única vez que esto se evalúa como verdadero es cuando me desplazo hasta la parte superior. Esto se debe a que es document.body.scrollHeightigual document.body.offsetHeighten mi instancia (Chrome)

Evan de la Cruz

Answer 10

24

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

Spencer
fuente

También la única respuesta que funcionó para mí. Estoy usando relleno para ocultar la barra de desplazamiento.

Craig

clientHeight funcionó muy bien. el uso de offsetHeight en la respuesta aceptada me dio un resultado que no era 100% exacto

Finlay Roelofs

elegante, gracias ... también puede usarlo con Vue en un evento de desplazamiento y @scroll="scrolling"luego en los métodos scrolling(event) { event.target // as el in the answer }Buena suerte

Yassine Sedrani

Answer 11

También la única respuesta que funcionó para mí. Estoy usando relleno para ocultar la barra de desplazamiento.

Craig

Answer 12

clientHeight funcionó muy bien. el uso de offsetHeight en la respuesta aceptada me dio un resultado que no era 100% exacto

Finlay Roelofs

Answer 13

elegante, gracias ... también puede usarlo con Vue en un evento de desplazamiento y @scroll="scrolling"luego en los métodos scrolling(event) { event.target // as el in the answer }Buena suerte

Yassine Sedrani

Answer 14

10

Un poco tarde para esta fiesta, pero ninguna de las respuestas anteriores parece funcionar particularmente bien cuando ...

La escala de pantalla se aplica al sistema operativo para pantallas UHD
La escala / zoom se aplica al navegador

Para adaptarse a todas las eventualidades, deberá redondear la posición de desplazamiento calculada:

Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight

Matthew Layton
fuente

Esta respuesta es la primera que funciona correctamente (también he probado las respuestas de stackoverflow.com/q/5828275 ). Como han mencionado otros, los márgenes, el zoom y otros factores entran en juego, y esto parece manejarlos todos. Editar: La respuesta de Spencer a continuación parece ser básicamente la misma, también correcta.

Jan Bradáč

Answer 15

Esta respuesta es la primera que funciona correctamente (también he probado las respuestas de stackoverflow.com/q/5828275 ). Como han mencionado otros, los márgenes, el zoom y otros factores entran en juego, y esto parece manejarlos todos. Editar: La respuesta de Spencer a continuación parece ser básicamente la misma, también correcta.

Jan Bradáč

Answer 16

8

Devuelve verdadero si un elemento está al final de su desplazamiento, falso si no lo está.

element.scrollHeight - element.scrollTop === element.clientHeight

Red de desarrolladores de Mozilla

Emmanuel Osimosu
fuente

1

Para mí, usando Chrome, donde el elemento es document.body, esto no funciona. document.body.scrollHeighty document.bodyclientHeighttienen el mismo valor, por lo que la expresión nunca es verdadera.

Evan de la Cruz

¿Qué edición podemos hacer para que podamos detectar que el desplazamiento está cerca del final? Por ejemplo, si el desplazamiento está por debajo del 75%, considérelo cerca del final

iamsaksham

Answer 17

1

Para mí, usando Chrome, donde el elemento es document.body, esto no funciona. document.body.scrollHeighty document.bodyclientHeighttienen el mismo valor, por lo que la expresión nunca es verdadera.

Evan de la Cruz

Answer 18

¿Qué edición podemos hacer para que podamos detectar que el desplazamiento está cerca del final? Por ejemplo, si el desplazamiento está por debajo del 75%, considérelo cerca del final

iamsaksham

Answer 19

<!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.

Answer 20

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")
  }
})

Answer 21

Esta funciona para mí. Un enfoque ligeramente diferente.

if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
    return 'scrollOnTheBottom';
}

Answer 22

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'); 
        } 
});

¿Cómo puedo determinar si un div se desplaza hasta la parte inferior?

Respuestas: