El método scrollTop() en jQuery se usa para establecer o devolver la posición de la barra de desplazamiento vertical para los elementos seleccionados. Con la ayuda de este método, podemos encontrar la dirección de desplazamiento del mouse.
Sintaxis:
$(selector).scrollTop(position)
Parámetros: este método acepta la posición de un solo parámetro, que es opcional. Se utiliza para especificar la posición de la barra de desplazamiento vertical en píxeles.
Valor devuelto: Devuelve la posición vertical de la barra de desplazamiento del elemento seleccionado.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Determine the direction of scroll event
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
html, body {
height: 300%
}
div {
position: fixed;
padding-left: 10px;
padding-top: 30px;
height: 10%;
width: 35%;
background: lightgrey;
font-weight: bold;
border: 2px solid green;
}
</style>
</head>
<body>
<div></div>
<!-- Script to determine the direction
of a jQuery scroll event -->
<script>
var position = $(window).scrollTop();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > position) {
console.log('scrollDown');
$('div').text('Scrolling Down Scripts');
} else {
console.log('scrollUp');
$('div').text('Scrolling Up Scripts');
}
position = scroll;
});
</script>
</body>
</html>
Producción:
- Desplazamiento hacia arriba:
- Desplazamiento hacia abajo:
