jQuery scroll() method

The scroll() method is used to trigger the scroll event or attach a function to run when scrolling occurs.

The scroll event occurs when a scrollbar is used for an element. The event is triggered when the user moves the scrollbar up or down. We can use the CSS overflow property for creating a scrollbar. The scroll event fires for window objects or for all scrollable elements.

Syntax

We can either simply use the scroll() method or can add a function to the scroll event. The syntax of using the scroll() method is given as follows -

Trigger the event for the selected elements

Attach a function

The selector in the above syntax is the selected element. The parameter function mentioned in the above syntax is optional. It is a function to execute when the scroll event occurs. The attached function performs a specific task on scrolling.

Let's see an illustration of using the scroll() method.

Example

It is a simple example of using the scroll() method. Here, there is a paragraph element with id = "para" on which we are applying the scroll() method. On scrolling the paragraph, the function attached to the scroll() method will trigger and will change the color and the background color of the corresponding paragraph. Here, we are using the optional parameter of the scroll() method.

Output

After scrolling the bordered text on the screen, we will get the following output -