自定義滾動條和同位素

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

問題可能是更新方法在同位素動畫完成之前運行。我想你應該更好地使用插件的updateOnContentResize選項參數：

$(".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"); 
    } 
});