Question

我有一段代码通过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的浏览器（大问题）中无效。

我如何让它发挥作用？有关如何提高效率的任何指示？

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

唯一的问题是，如果你按下输入或空格之类的东西，你将停止动画但是再次重新启动它，因为你仍然选择了按钮，所以任何其他键都可以工作，或者你可以点击文档（关闭按钮）然后使用输入或空格键...基本上onkeyup只是另一个事件，向您显示$（'body'）。stop（）是你真正想要的。

Answer 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();
    }
});

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

滚动捕获工作，只移动一个像素

2 个答案: