¿Cómo detectar cuando el usuario se desplaza al final de un div?

La tarea es detectar la parte inferior del elemento <div> cuando el usuario se desplaza hasta la parte inferior usando JQuery. Aquí hay algunos métodos discutidos.

  • Método jQuery on() :
    este método agrega uno o más controladores de eventos para los elementos seleccionados y los elementos secundarios.
    Sintaxis:
    $(selector).on(event, childSelector, data, function, map)
    

    Parámetros:

    • evento: Este parámetro es obligatorio. Especifica uno o más eventos o espacios de nombres para adjuntar a los elementos seleccionados.
      En el caso de valores de eventos múltiples, estos están separados por espacios. El evento debe ser válido.
    • childSelector: este parámetro es opcional. Especifica que el controlador de eventos solo debe adjuntarse a los elementos secundarios definidos.
    • datos: Este parámetro es opcional. Especifica datos adicionales para pasar a la función.
    • función: Este parámetro es obligatorio. Especifica la función que se ejecutará cuando ocurra el evento.
    • map: especifica un mapa de eventos ({event:func(), event:func(), …}) que tiene uno o más eventos para agregar a los elementos seleccionados y funciones para ejecutar cuando ocurren los eventos.

Ejemplo 1: este ejemplo alerta que llegó al final del DIV cuando el usuario se desplaza hasta la parte inferior del elemento div con class = div.

<!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;"> 
            GeeksForGeeks 
        </h1>
    <p id="GFG_UP" 
       style="font-size: 17px;
              font-weight: bold;">
    </p>
    <div class="div">
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
        <h1>GeeksforGeeks</h1>
    </div>
    <script>
        $('#GFG_UP').text(
          'Scroll till bottom to get alert!');
        
        $(window).on('scroll', function() {
            if ($(window).scrollTop() >= $(
              '.div').offset().top + $('.div').
                outerHeight() - window.innerHeight) {
                
                alert('You reached the end of the DIV');
            }
        });
    </script>
</body>
  
</html>

Producción:

  • Antes de llegar al fondo:
  • Después de llegar al fondo:

Ejemplo 2: ¡ Este ejemplo alerta que se alcanzó el final de DIV! cuando el usuario se desplaza hasta la parte inferior del elemento div con class = div.

<!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;"> 
            GeeksForGeeks 
        </h1>
    <p id="GFG_UP"
       style="font-size: 17px;
              font-weight: bold;">
    </p>
    <center>
        <div class="div" style="width:200px;
                                height:150px;
                                overflow:auto;">
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
            <h1>GeeksforGeeks</h1>
        </div>
    </center>
    <script>
        $('#GFG_UP').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 is reached!');
                }
            });
        });
    </script>
</body>
  
</html>

Producción:

  • Antes de llegar al fondo:
  • Después de llegar al fondo:

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *