有滚动捕捉工作，只移动一个像素答案

【问题标题】：Have scroll catch work, only moves one pixel有滚动捕捉工作，只移动一个像素
【发布时间】：2009-11-16 04:06:11
【问题描述】：

我有一段代码通过animate jQuery 东西向上滚动页面，但是为了提高可用性，如果用户以任何方式干扰滚动动作（例如滚轮、抓取滚动条等），那么它会立即停止运动。

一周前我问了一个问题here，但在一些测试人员友好地试用了代码后，他们报告说它在基于 Gecko 的浏览器中不起作用。

这是我目前的代码：

$(document).ready(function() {
    // scroll to top: check if user / animate is scrolling
    var scrollAnimating = false;

    jQuery.fx.step.scrollTop = function(E) {
        scrollAnimating = true;
        E.elem.scrollTop = E.now;
        scrollAnimating = false;
    };

    // go to top (on click)
    $('#gototop').click(function() {
        $(this).fadeOut(100,function() {
            $(this).css({backgroundColor: '#CCC'}).html('Going... (scroll to stop)').fadeIn(100, function() {
                $('html,body').animate({scrollTop:0},3000);
            })
        });

        $(window).scroll(function() {
            if (!scrollAnimating) {
                $('html,body').stop();
                $('#gototop').html('Go to top');
            };
        });

        resetNames();

        return false;
    });

    function resetNames() {
        setTimeout(function() {
            $('#gototop').html('Go to top').css({backgroundColor: '#DDD'});
        },3000);
    }
});

基本上在单击#gototop 时，它将开始动画滚动到顶部。如果滚动受到干扰，滚动动作将停止，#gototop 的文本将被重置。

这段代码有一些问题：有些部分效率低得离谱，而且在基于 Gecko 的浏览器中不起作用（大问题）。

如何让它工作？有关如何使其高效的任何指示？

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

尝试为 Gecko 简单地使用 $('body') 选择器，您可能会发现您的动画在 Opera 中也很混乱，因为 html 和 body 选择器都可用并且操作执行了两次。尝试这样的事情（小测试用例）：

    <html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            function scrollWin()
            {
                $('body').animate({scrollTop: $('html').offset().top}, 2000);
            }

            function scrollStop()
            {
                $('body').stop();
            }
        </script>
    </head>
    <body onkeyup="scrollStop()">
        <div style="background:grey;height:1500px"></div>
        <input type="button" onclick="scrollWin();" value="Scroll up" />
    </body>
</html>

唯一的问题是，如果您按 Enter 或空格之类的键，您将停止动画，但由于您仍然选择了按钮，所以再次重新启动动画，因此任何其他键都可以使用，或者您可以单击文档（关闭按钮），然后使用回车键或空格键...基本上 onkeyup 只是另一个事件，向您展示 $('body').stop() 是您真正想要的。

【讨论】：

我需要让它在所有浏览器中工作（除了 IE：如果它不能在那里工作，我很好）。也许我应该尝试某种浏览器检测脚本？
您在浏览器中尝试过我的脚本吗？结果如何？
没有必要，因为您完全错过了所有复杂信息的重点（无意冒犯）：所有代码都应该在检测到用户试图反击时自动停止滚动滚动（例如，停止阅读）。很明显，您的代码没有这样做。对不起。
抱歉，是的，我发布该代码是为了帮助您解决 Gecko 问题，但也因为我发现其他人说他们在 Opera 中遇到类似选择器的问题。您所需要的只是我下一个答案中的代码......

【解决方案2】：

只是想为通过 Google 找到此问题的任何人回答问题：

在这里找到答案：let user scrolling stop jquery animation of scrolltop?

基本上，不是使用变量然后检查变量的滚动，而是将一个函数绑定到'html, body'，该函数仅在用户进行滚动并停止动画时激活。

基本上：

// Stop the animation if the user scrolls.
$('html, body').bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
        $('html, body').stop();
    }
});

根据 OP 的上下文回答：

$(document).ready(function() { 
    // go to top (on click)
    $('#gototop').click(function() {
        $(this).fadeOut(100,function() {
            $(this).css({backgroundColor: '#CCC'}).html('Going... (scroll to stop)').fadeIn(100, function() {
                $('html,body').animate({scrollTop:0},3000);
            })
        });
        return false;
    });
});
function resetNames() {
    setTimeout(function() {
        $('#gototop').html('Go to top').css({backgroundColor: '#DDD'});
    },3000);
}
// Stop the animation if the user scrolls.
$('html, body').bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
        $('html, body').stop();
        resetNames();
    }
});

注意：未经测试，我认为这可能也会停止所有其他动画。

【讨论】：