En este artículo, discutiremos cómo ejecutar el código cuando los usuarios desplazan el contenido usando jQuery. Para ejecutar el código al desplazar el contenido, se utiliza el método scroll() . El método scroll() se usa para ejecutar el código cuando el usuario se desplaza en el elemento especificado.
Sintaxis:
$(selector).scroll(function)
Parámetro: este método acepta la función de parámetros únicos, que es opcional. Se utiliza para especificar la función que se ejecutará cuando se active el evento de desplazamiento.
Enfoque: en el siguiente ejemplo, hemos creado un elemento div que contiene el contenido del elemento y hemos usado algunos estilos CSS en el elemento div. Hemos agregado una propiedad overflow-y para desplazarse y hacer que el contenido se pueda desplazar. Cuando el usuario se desplaza por el contenido div, se llama al método jQuery scroll() y este método contiene el método css() que aplica algunos estilos CSS en el elemento div.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to run a code on scroll event using jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
h1,
h3 {
text-align: center;
}
.GFG {
width: 350px;
height: 150px;
border: 1px solid black;
overflow-x: hidden;
overflow-y: scroll;
text-align: justify;
display: flex;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to run a code on scroll event using jQuery?
</h3>
<div class="GFG">
HTML stands for HyperText Markup Language. It
is used to design web pages using a markup
language. HTML is the combination of Hypertext
and Markup language. Hypertext defines the link
between the web pages. A markup language is
used to define the text document within tag
which defines the structure of web pages. This
language is used to annotate (make notes for
the computer) text so that a machine can
understand it and manipulate text accordingly.
Most markup languages (e.g. HTML) are
human-readable. The language uses tags to
define what manipulation has to be done on
the text.
</div>
<script>
$(document).ready(function () {
$(".GFG").scroll(function () {
$(".GFG").css({
"fontSize": "18px",
"color": "green"
})
});
});
</script>
</body>
</html>
Producción:
