How to run a code on scroll event in jQuery? - GeeksforGeeks

20 Dec, 2021
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="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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
HTML-Questions
jQuery-Methods
jQuery-Questions
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?