How to run a code on scroll event in jQuery? Last Updated : 31 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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: Comment More infoAdvertise with us Next Article How to determine the direction of a jQuery scroll event? V vkash8574 Follow Improve Article Tags : Web Technologies JQuery jQuery-Methods jQuery-Questions Similar Reads How to run a code on mouseenter event in jQuery ? In this article, we will see how to run the code when the mouse enters into the specific area using jQuery. To run the code on a mouse enter a specific area, mouseenter() method is used. The mouseenter() method works when the mouse pointer moves over the selected element. Syntax: $(selector).mouseen 1 min read How to run a code on document ready event in jQuery ? In this article, we will see how to run a code when a page loads using jQuery. To run a code at page load time, we will use the ready() method. This method helps to load the whole page and then execute the rest code. This method specifies the function to execute when the DOM is fully loaded. Syntax: 1 min read How to run code on mouseleave event in jQuery ? In this article, we will see how to run the code when the mouse leaves into a specific area using jQuery. To run the code on a mouse leave into a specific area, the mouseleave() method is used. The mouseleave() method works when the mouse pointer leaves the selected element. Syntax: $(selector).mous 1 min read How to determine the direction of a jQuery scroll event? The scrollTop() method in jQuery is used to set or return the vertical scrollbar position for the selected elements. With the help of this method, we can find the mouse scroll direction. Syntax: $(selector).scrollTop(position) Parameters: This method accepts single parameter position which is option 1 min read How to scroll the page up or down using anchor element in jQuery ? The problem is to include a slide effect whenever we click a local anchor and we want to scroll up or down the page accordingly. Earlier we can do it natively by using CSS property. Syntax: a { scroll-behavior: smooth; } Now with the help of jQuery, we can do it by using the following two methods: j 2 min read How to change style of elements on scroll using jQuery ? We have given an HTML document containing some CSS properties, and the task is to change the CSS property to a particular element after scrolling the page using jQuery. To change the style of element on scroll, we get the number of pixels by which the content of an element has been scrolled horizont 2 min read Like