jQuery Event scroll() Method

The jQuery event scroll() method is used to attach an event handler to the scroll event or triggers when a scroll event occurs. It occurs when the user scrolls on the selected element.

This method is applicable to all scrollable elements and the browser window itself.

Syntax

Following is the syntax of the jQuery event scroll() method −

$(selector).scroll(function)

Parameters

This method accepts an optional parameter as a function, which is described below −

function − An optional function to execute when the scroll event occurs.

Return Value

This method does not have any return value.

Example 1

The following is the basic example of the jQuery event scroll() method −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    body{
        height: 110vh;
    }
</style>
</head>
<body>
</body>
<p>Scroll on the window screen</p>
<script>
    $(window).scroll(function(){
        alert("The user scrolls on the window screen.")
    })
</script>
</html>

Output

After executing the program, an alert pop-up message appears when the user scrolls on the window screen −

Example 2

The following is another example of the jQuery scroll() method. In this case, the background color of the div element changes when the user scrolls within it −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        width: 500px;
        max-height: 100px;
        height: 150px;
        overflow-y: auto;
        font-size: 20px;
        padding: 10px;
    }
</style>
</head>
<body>
</body>
<p>Scroll on the div element to change background-color</p>
<div>
    <p>The jQuery event scroll() method is used to attach an event handler to the scroll event, or triggers when scroll event occurs. it occurs when the user scroll on the selected element. This method applicable to all scrollable elements and browser window itself.</p>
</div>
<script>
    $('div').scroll(function(){
        $(this).css("background-color", "green");
    })
</script>
</html>

Output

The above program displays a div element. When the user scrolls within this div, the background color changes to 'green' −

Example 3

In the example below, a navigation bar is created. When the user clicks on it, the navigation bar will hide. As the user scrolls within the div element, the navigation bar will be visible at the top of the page −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        width: 600px;
        max-height: 100px;
        height: 100px;
        overflow-y: auto;
        font-size: 20px;
        padding: 10px;
        background-color: green;
    }
    nav{
        display: block;
        width: 90%;
        margin: 0px auto;
        padding: 10px;
        background-color: black;
    }
    nav ul{
        list-style: none;
    }
    nav ul li{
        display: inline-block;
        padding: 10px;
        color: white;
    }
</style>
</head>
<body>
</body>
<p>Click on nav to hide and scroll on the div element to display nav again.</p>
<div class="demo">
    <nav>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            <li>Blog</li>
        </ul>
    </nav>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident excepturi aut sint eius, ipsam aliquid! Officia obcaecati eveniet laboriosam quidem! Hic accusamus dolores temporibus obcaecati labore ea asperiores doloremque reprehenderit!</p>
</div>
<script>
    $('nav').click(function(){
        $(this).slideToggle();
    });
    $('div').scroll(function(){
        $('nav').slideDown();
    });
</script>
</html>

Output

After executing the program, a div element is displayed, containing a navigation bar and some text. When the user clicks on the navigation bar, it becomes hidden. As the user scrolls within the div element, the navigation bar appears again −

jquery_ref_events.htm

Print Page