In this article, we will discuss how to run the code when users scroll the content using jQuery. To run the code on scrolling the content, the scroll() method is used. The scroll() method is used to run the code when the user scrolls in the specified element.
Syntax:
$(selector).scroll(function)
Parameter: This method accepts single parameters function which is optional. It is used to specify the function to run when the scroll event is triggered.
Approach: In the below example, we have created a div element that contains the content of the element and we have used some CSS styles on the div element. We have added an overflow-y property to scroll to make content scrollable. When the user scrolls the div content, the jQuery scroll() method is called and this method contains css() method that applies some CSS styles on the div element.
Example:
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=
</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>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!