Question

我想在滚动结束后立即调用一个函数。我尝试了一些不同的加载，其中没有一个已经完成了，然后我在SO中找到了这个解决方案：

How do I know when I've stopped scrolling Javascript

我仔细看了第二个答案并试了一下 - 它有效。然后我试着为了我的目的略微改变它。所以现在整个shebang看起来像这样：

<!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>

当我运行它时，滚动事件会触发（太棒了！）。

然后，不是调用我的“scrollEnded（）”函数，而是生成错误：“scrollEnded未定义”。我试图通过进入调试模式并逐步完成脚本来找出它的来源，但随后我进入了一个“匿名函数” - 这就是我目前对这个问题的理解的极限。我已经尝试将scrollEnded（）函数移到顶部。我尝试过各种各样的事情......

我可以做些什么来完成这项工作？（可以这件事有效吗？）

Answer 1

作为所有这些答案的补充，我只建议设置200ms超时而不是500. 200ms是手指移动和期望看到效果的眼睛之间的平均人眼反应。 200ms超时应该足够短，不被用户注意到，并且足够长时间以便javascript触发并完成事件。我之前尝试过200ms，它似乎工作得很好，即使在较慢的PC上也是如此。

Answer 2

您是否尝试将scrollEnded（）置于bodyScroll（）？

之上

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

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

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

};

Answer 3

jQuery throttle/debounce plugin非常适合这一点。使用at_begin = false在最后执行回调。

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

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

Demo

Answer 4

很抱歉，我完全忽略了这个功能在闭包内的事实，因此我之前的回复中的页面无法使用。你可以通过以下方式使它工作：

window.scrollEnded = function () { console.log('scrollEnded. No do something astounding'); }

后跟

window.setTimeout(window.scrollEnded, 500);

这应该删除字符串的eval，并将其放在可用的全局范围内。在命名空间污染方面还存在其他奇怪之处，但目前我正试图做一些简单的事情并帮助你实现它。

滚动结束后如何调用函数？

4 个答案: