En este artículo, aprenderemos a mostrar actualizaciones de desplazamiento al desplazarse hacia abajo en una página web. El controlador de eventos scroll() se puede usar para detectar cualquier desplazamiento en la página, pero solo necesitamos detectar el desplazamiento hacia abajo. El evento de desplazamiento hacia abajo se puede manejar usando los eventos scroll() y scrollTop() .
Método HTML DOM Window Scroll(): el evento de desplazamiento se envía a un elemento cuando el usuario se desplaza a un lugar diferente en el elemento. Se aplica a objetos de ventana, pero también a marcos y elementos desplazables con la propiedad de desbordamiento de CSS configurada para desplazarse.
Sintaxis:
$( "#id" ).scroll(function() {});
scrollTop(): obtenga la posición vertical actual de la barra de desplazamiento para el primer elemento en el conjunto de elementos coincidentes o establezca la posición vertical de la barra de desplazamiento para cada elemento coincidente. Este método no acepta ningún argumento.
Sintaxis:
$( "#id" ).scrollTop( );
Acercarse:
- Pondremos la Posición vertical inicial a 0
- Si se realiza algún desplazamiento, será detectado por el evento scroll() y la posición vertical actual se recuperará mediante el evento scrollTop() .
- Si la posición vertical inicial es menor que (<) la posición vertical actual, se muestra el texto «Desplazamiento hacia abajo detectado».
- El texto se desvanecerá usando el siguiente código.
$("#updater").fadeOut(1000);
- Si la posición vertical inicial es mayor que ( > ) la posición vertical actual, la propiedad de visualización del texto de salida se establecerá en «ninguno».
$("#updater").css('display','None');
Ejemplo: El siguiente código demuestra el enfoque anterior.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
var x = 0;
$(document).ready(function () {
var prevPosition = 0;
var currPosition;
$('p').css('margin-bottom', '50px');
$("div").scroll(function () {
currPosition = $("div").scrollTop();
if (prevPosition < currPosition) {
$("#updater").css('display', 'block');
$("#updater").fadeOut(1000);
prevPosition = currPosition;
}
else if (prevPosition >= currPosition) {
$("#updater").css('display', 'None');
prevPosition = currPosition;
}
});
});
</script>
</head>
<body>
<h1> update the scroll down event </h1>
<div style="height:300px;
width:100%; overflow:scroll;">
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
</div>
<h1 id="updater" style="display:none;">
scroll down detected
</h1>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pulamolusaimohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA