javascript - 检测overflow-x:scroll元素的结尾并在动画之前添加一个类

如标题所示，我想检测使用溢出构建的可滚动元素的开始和结束。

以下代码有效：

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。

无论如何，有没有检测到这种情况并在需要的地方应用箭头类？

谢谢。

最佳答案

休息回来，意识到我应该在单击事件和滚动事件结束时进行检查。现在效果更好。