The scroll event occurs when the user scrolls an element by using arrow keys, scroll bar or mouse wheel. We cannot prevent scrolling. When user scrolls to different place in the element, the scroll event is sent to an element. It is sent whenever the element’s scroll position changes. The scroll() event also occurs when browser window is scrolled and when scrollable elements like textarea are scrolled. The scroll() event attaches a function which is to be run when a scroll event occurs.
JQuery Scroll() Syntax
It has parameter called function which specifies the function to be run when scroll event occurs.
JQuery Scroll() Example
<title>JQuery Scroll Event</title>
<h2>JQuery Scroll Event Example</h2>
$( "span" ).css( "display", "inline" ).fadeOut( "slow" );
<textarea rows="4" cols="20" id="txtscroll">
- $(“#txtscroll”).scroll(function()) line defines scroll function which is to be run when a scroll event occurs and uses id selector txtscroll of textarea component.
- $( “span” ).css( “display”, “inline” ).fadeOut( “slow” ); line uses CSS properties to display the line in style format and fadeout() method defines fading effect from visible to hidden for selected elements and specifies the speed of the fading effect.
- The text area defines multi line input control. It can hold unlimited number of characters and text in the fixed width font. The size of text area can be specified by rows and columns attributes.
- After executing the program, you will get textarea in the browser with specified messages. When scroll each time in the textarea, you will be getting Scroll happened!!! line in the browser.
JQuery Scroll Event Demo
When you run the above example, you would get the following output :