사용자 정의 스크롤 및 동위 원소

Question

나는 내부 Isotope을 구현하려고이 Custom Scrollbar :

나는 수평 하나를 사용 싶어 다음과 같이 내 코드가 보인다 : 내가 중 하나를 클릭하면

// My Scrollbar 
$(".content-selector").mCustomScrollbar({ 
     horizontalScroll:true, 
     autoDraggerLength: true,     
}); 

// My Isotope 
var $container = $('.iso-container'); 
    $container.isotope({ 
     filter: '*', 
     layoutMode: 'straightAcross',   
     resizesContainer: true, 
     animationOptions: { 
      duration: 750, 
      easing: 'linear', 
      queue: false 
     } 
    }); 

    $('.filter a').click(function(){ 

     $('.filter .current').removeClass('current'); 
     $(this).addClass('current'); 

     var selector = $(this).attr('data-filter'); 
     $container.isotope({ 
      filter: selector, 
      animationOptions: { 
       duration: 750, 
       easing: 'linear', 
       queue: false 
      } 
     }); 

     $(".content-selector").mCustomScrollbar("update"); 
     return false; 

    }); 

내 생각이었다 필터 태그를 사용하는 경우 문서에서 설명하는 것처럼 스크롤 막대가 "업데이트"되어야합니다 (전체 스크롤 막대의 너비). 문제는 그가 시도하는 것처럼 보이지만 지금까지 아무 일도 일어나지 않는다는 것입니다. 뭔가를 잊었거나 제 코드가 잘못 되었나요?

Answer 1

동위 원소 애니메이션이 완료되기 전에 업데이트 방법이 실행되는 것이 문제 일 수 있습니다.

$(".content-selector").mCustomScrollbar({ 
    advanced:{ 
     updateOnContentResize: true 
    } 
}); 

또는 동위 원소의 onLayout 콜백 옵션에서 업데이트 방법 전화 :

$container.isotope({ 
    filter: selector, 
    animationOptions: { 
     duration: 750, 
     easing: 'linear', 
     queue: false 
    }, 
    onLayout: function($elems, instance) { 
     $(".content-selector").mCustomScrollbar("update"); 
    } 
});