用戶互動後取消滾動

Question

當用戶點擊指向同一頁面的鏈接時，我的網頁動畫會滾動。我想在用戶嘗試滾動時立即取消該動畫（否則用戶和瀏覽器正在爭奪控制權） - 無論是使用鼠標滾輪，鍵盤還是滾動條（或其他方式），是否還有其他方法滾動？）。在使用鼠標滾輪或鍵盤後，我設法取消了動畫，如何使用滾動條來操作？

這裏是我的代碼如何查找鍵盤：

$(document.documentElement).keydown(function (event) { 
    if(event.keyCode == 38 || 40) stopScroll(); 
}); 

function stopScroll() { 
    $("html, body").stop(true, false); 
} 

我也試着這樣做的更優雅的方式使用scroll()，問題是，scroll()捕捉一切，包括動畫和自動滾動。我想不出有什麼辦法讓它捕捉除了動畫滾動之外的所有滾動。

Answer 1

你需要的動畫標記，這樣

$("html, body").stop(true, false).prop('animatedMark',0.0).animate({scrollTop : top, animatedMark: '+=1.0'}) 

下面是代碼，該代碼是GWT和JavaScript的組合，以便把它搬到JS，不是完全測試的東西，請嘗試

var lastAnimatedMark=0.0; 
function scrollToThis(top){ 
    // Select/ stop any previous animation/reset the mark to 0 
    // and finally animate the scroll and the mark 
    $("html, body").stop(true, false).prop('animatedMark',0.0). 
    animate({scrollTop : top, animatedMark: '+=1.0'} 
    ,10000,function(){ 
     //We finished , nothing just clear the data   
     lastAnimatedMark=0.0; 
     $("html, body").prop('animatedMark',0.0); 
    }); 
} 
//Gets the animatedMark value 
function animatedMark() { 
    var x=$("html, body").prop('animatedMark'); 
    if (x==undefined){ 
     $("html, body").prop('animatedMark', 0.0); 
    } 
    x=$("html, body").prop('animatedMark'); 
    return x; 
}; 

//Kills the animation 
function stopBodyAnimation() { 
    lastAnimatedMark=0; 
    $("html, body").stop(true, false); 
} 
//This should be hooked to window scroll event 
function scrolled(){ 
    //get current mark 
    var currentAnimatedMark=animatedMark();   
    //mark must be more than zero (jQuery animation is on) & but 
    //because last=current , this is user interaction. 
    if (currentAnimatedMark>0 && (lastAnimatedMark==currentAnimatedMark)) { 
     //During Animation but the marks are the same ! 
     stopBodyAnimation(); 
     return; 
    } 

    lastAnimatedMark=currentAnimatedMark;  
} 

下面是關於它的

http://alaamurad.com/blog/#!canceling-jquery-animation-after-user-interaction的博客

享受！

Answer 2

這不是很優雅，但是您可以使用某種標誌來檢測您正在處理的動畫類型（動畫或「手動」），並在動畫動畫時始終將其殺死。下面是一個未經測試的例子：

var animatedScroll = false; 

// you probably have a method looking something like this: 
function animatedScrollTo(top) { 
    // set flag to true 
    animatedScroll = true; 
    $('html').animate({ 
    scrollTop : top 
    }, 'slow', function() { 
    // reset flag after animation is completed 
    animatedScroll = false; 
    }); 
} 

function stopScroll() { 
    if (animatedScroll) { 
    $("html, body").stop(true, false); 
    } 
} 

Answer 3

這裏是一個jQuery函數，應該做的伎倆：

function polite_scroll_to(val, duration, callback) { 
    /* scrolls body to a value, without fighting the user if they 
     try to scroll in the middle of the animation. */ 

    var auto_scroll = false; 

    function stop_scroll() { 
     if (!auto_scroll) { 
      $("html, body").stop(true, false); 
     } 
    }; 
    $(window).on('scroll', stop_scroll); 

    $("html, body").animate({ 
     scrollTop: val 
    }, { 
     duration: duration, 
     step: function() { 
      auto_scroll = true; 
      $(window).one('scroll', function() { 
       auto_scroll = false; 
      }); 
     }, 
     complete: function() { 
      callback && callback(); 
     }, 
     always: function() { 
      $(window).off('scroll', stop_scroll); 
     } 
    }); 

};