getting secondary div to scroll when "custom" scrollbar scrolls

[tanner2272]

Hi,

We are using the custom scrollbar on a website, where we wish to have a secondary DIV (below the custom-scrollbar DIV) scroll in unison.

The Custom DIV has the ID of "leader" and the secondary DIV has the ID of "copycat".

Prior to applying the custom-scrollbar we were using:

$(window).load(function(){
                        $('#leader').scroll(function(e){
  $('#copycat').scrollLeft($(this).scrollLeft());
});

$('#copycat').scroll(function(e){
    $('#leader').scrollLeft($(this).scrollLeft());
});
});

...and it worked a treat. But once we'd applied custom-scrollbar, the above script no longer worked. Thus we added in a callback to the custom-scroll code:

    (function($){
        $(window).load(function(){
            /* custom scrollbar fn call */
            $(".fixedright").mCustomScrollbar({
                horizontalScroll:true,
                scrollInertia: 0,
                scrollButtons:{
                    enable:true
                },
                theme:"dark",
                callbacks: {
                    whileScrolling:function() {
                        $('div#copycat').scrollLeft(-1 * mcs.left);

                    }
                }
            });
        });
    })(jQuery);

...and this works fine in all browsers except IE10. In IE10 it sorta scrolls, but very juddery and the copycat fails to keep in sync with the leader. Is there an alternative way the two could be combined?

Thanks in advance, Martin.

[tanner2272]

why didn't the code examples show up?

[veremey]

Hi, @malihu Do you have an answer to this issue? Maybe for the newest browsers that it was in Dec 2013? :)

[veremey]

Or can we synk mCustomScrollbars || get parameters in one mCustomScrollbar from another?