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.
- evento: Este parámetro es obligatorio. Especifica uno o más eventos o espacios de nombres para adjuntar a los elementos seleccionados.
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