オーバーフロー-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

休憩から戻ってくると、クリックイベントからスクロールイベントへの最後にチェックを入れる必要があります。これは今より良く機能します。