Home/ Questions/Q 4117238
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T22:48:35+00:00

I want to call a function right after a scroll ends. I have tried

  • 0

I want to call a function right after a scroll ends. I have tried a load of different things, none of which have quite worked, and then I came upon this solution in SO:

How do I know when I've stopped scrolling Javascript

I took a good look at the second answer and tried it – it works. Then I tried to change it slightly for my purposes. So now the whole shebang looks like this:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Do something after scroll ends</title>

<style type="text/css">
    #scrollableDiv{
        width:500px;
        height:100px;
        overflow:scroll;
    }

    #someContent{
        width:600px;
        height:200px;
    }
</style>

<script type="text/javascript" src="scripts/jquery-1.5.1-min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {

        $('#scrollableDiv').bind('scroll', bodyScroll);

        var scrollTimer = -1;

        function bodyScroll() {
            console.log('scrolling.');

            if (scrollTimer != -1)
                clearTimeout(scrollTimer);

            scrollTimer = window.setTimeout('scrollEnded()', 500);

        };

        function scrollEnded(){
            console.log('scrollEnded. Now do something astounding.');
        };

    });
</script>

</head>

<body>

<div id="scrollableDiv">
    <div id="someContent">
        Scroll me.  
    </div>
</div>

</body>
</html>

When I run this, the scroll event triggers (great!).

Then, instead of calling my “scrollEnded()” function, an error is generated: “scrollEnded is not defined”. I’ve tried to figure out where this comes from by going into debug mode and stepping through the script, but then I land up in an “anonymous function” – which is where I hit the limits of my current understanding of this problem. I’ve tried moving the scrollEnded() function to the top. I’ve tried all sorts of things…

What can I do to make this work? (Can this thing work?)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The jQuery throttle/debounce plugin is perfect for this. Use at_begin = false to execute the callback at the end.

    var scrollEnded = $.debounce(500, false, function ()
{
    console.log('scroll ended');
});

$('#scrollableDiv').scroll(scrollEnded);

    Demo

    • 0