自定义滚动条和同位素

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