Question

我尝试在Isotope：

我想使用水平的，我的代码如下：

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

自定义滚动条和同位素

1 个答案: