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

从休息中回来并意识到我应该检查它是否在最后一次点击事件和滚动事件。这现在好多了。

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

1 个答案: