滚动抓取工作，只移动一个像素

我有一个代码块，通过一个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的浏览器（biggie）中不起作用。

我该如何让它起作用？任何关于如何使其高效的指针？

来源

2009-11-16 Brandon Wang

试试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（）是你真的在追求什么。

来源

2009-11-16 06:01:14 SimonDever

我需要让它在所有浏览器中都能正常工作（IE除外：如果它没有在那里工作，对我很好）。也许我应该尝试某种浏览器检测脚本？ – 2009-11-17 03:01:31

你在浏览器中试过我的脚本吗？结果是什么？ – SimonDever 2009-11-17 03:21:06

没有必要，因为你完全错过了所有复杂信息的要点（没有任何意图）：当检测到用户正试图对抗滚动时，所有的代码应该自动停止滚动（比如停止它来阅读）。很明显，你的代码不会这样做。抱歉。 – 2009-11-18 22:21:44

只是想回答谁发现通过谷歌这个问题对任何人的问题：

找到答案在这里：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(); 
    } 
});

注：未经检验的，我觉得这可能会停止所有其他动画也是如此。

来源

2013-08-09 08:28:57 ChooJeremy

滚动抓取工作，只移动一个像素

回答

相关问题