滾動抓取工作，只移動一個像素

我有一個代碼塊，通過一個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

滾動抓取工作，只移動一個像素

回答

相關問題