檢測overflow-x：scroll元素的結束並在動畫之前添加一個類

Question

正如標題所示，我想檢測使用溢出構建的可滾動元素的開始和結束。

下面的代碼工作：

var scrollAmount = 150; 
var scrollBox = $('.js-compare_scroll'); 
var arrowLeft = $('.js-compare_scroll_left'); 
var arrowRight = $('.js-compare_scroll_right'); 
var inactive = 'm-inactive'; 

$(arrowLeft).on('click', function() { 
    $(this).parent().find(scrollBox).stop().animate({ 
     scrollLeft: '-='+scrollAmount 
    }, function() { 
     arrowRight.removeClass(inactive); 
     if(scrollBox.scrollLeft() === 0) { 
      arrowLeft.addClass(inactive); 
     }   
    }); 
}); 
$(arrowRight).on('click', function() { 
    $(this).parent().find(scrollBox).stop().animate({ 
     scrollLeft: '+='+scrollAmount 
    }, function() { 
     arrowLeft.removeClass(inactive); 
     if(scrollBox.scrollLeft() + scrollBox.innerWidth() >= scrollBox[0].scrollWidth) { 
      arrowRight.addClass(inactive); 
     } 
    }); 
}); 

但是該類樣式的箭頭未激活的色唯一一次在動畫完成出現。我需要在動畫完成之前添加類，因爲它有延遲。我相信默認情況下它是400.

有沒有辦法檢測到這一點，並在需要的地方應用箭頭類？

謝謝。

Answer 1

從休息時間回來，意識到我應該檢查它是否在最後關閉click事件和滾動事件。現在這個工作好多了。