jQuery jScrollPane Synchronize Scroll

Question

Is it possible to synchronize two scrolls?

Answer 1

It should be pretty easy to do so by binding to the jsp-scroll-y event and then calling the scrollToY API method.

Or, since jScrollPane also dispatches plain scroll events you could adapt Peter Of The Corn's solution by using getContentPositionY instead of scrollTop() and scrollToY instead of scrollTop(value) (and likewise for the left/ top properties)

Answer 2

Add this function to your code:

  jQuery.fn.synchronizeScroll = function() {
             var elements = this;
             if (elements.length <= 1) return;

             elements.scroll(
             function() {
                 var left = $(this).scrollLeft();
                 var top = $(this).scrollTop();
                 elements.each(
                 function() {
                     if ($(this).scrollLeft() != left) $(this).scrollLeft(left);
                     if ($(this).scrollTop() != top) $(this).scrollTop(top);
                 }
                 );
             });
          }

Then, you can just synchronize all the scrollbars within an element like so:

$(“jqueryselectorgoeshere”).synchronizeScroll();

Answer 3

The answer of velozyrapthor is correct and working. The only thing I added to my code is the 'click on the track' event. When you click on the track it jumps to position.

Because my solution was involving a horizontal scroll bar, I changed the events to the horizontal ones.

this is my code:

$c1=$('#c1').jScrollPane();
$c2=$('#c2').jScrollPane();
//sync the two boxes to scroll together
//bind the scroll to c1
$("#c1").bind(
                 'jsp-scroll-x',
                 function(event, scrollPositionX, isAtTop, isAtBottom)
                 {
                     if($(this).find(".jspDrag").hasClass("jspActive"))
                     {
                         $c2.data('jsp').scrollToX(scrollPositionX)
                     }
                 }
             );
//bind the jump when clicking on the track
$("#c1").bind('mousedown',function()
{
    $c2.data('jsp').scrollToX($c1.data('jsp').getContentPositionX());
});
//bind the scroll to c2
$("#c2").bind(
                 'jsp-scroll-x',
                 function(event, scrollPositionX, isAtTop, isAtBottom)
                 {
                     if($(this).find(".jspDrag").hasClass("jspActive"))
                     {
                         $c1.data('jsp').scrollToX(scrollPositionX)
                     }
                 }
             );
//bind the jump when clicking on the track
$("#c2").bind('mousedown',function()
{
    $c1.data('jsp').scrollToX($c2.data('jsp').getContentPositionX());
});

Answer 4

/* This is my solution. thank both*/

$c1= $("#c1").jScrollPane();
$c2= $("#c2").jScrollPane();
$("#c1").bind(
        'jsp-scroll-y',
        function(event, scrollPositionY, isAtTop, isAtBottom)
        {
            if($(this).find(".jspDrag").hasClass("jspActive")){
            $c2.data('jsp').scrollToY(scrollPositionY)
            console.log('Handle jsp-scroll-y', this,
                        'scrollPositionY=', scrollPositionY,
                        'isAtTop=', isAtTop,
                        'isAtBottom=', isAtBottom);
            }
        }
    )
$("#c2").bind(
        'jsp-scroll-y',
        function(event, scrollPositionY, isAtTop, isAtBottom)
        {
            if($(this).find(".jspDrag").hasClass("jspActive")){
            $c1.data('jsp').scrollToY(scrollPositionY)
            console.log('Handle jsp-scroll-y', this,
                        'scrollPositionY=', scrollPositionY,
                        'isAtTop=', isAtTop,
                        'isAtBottom=', isAtBottom);
            }
        }
    )

Answer 5

Here's my solution that will make a sticky column, and a sticky row. Set overflow: hidden on #rowHeader, #columnHeader

            $("#dataTable").bind('jsp-scroll-y', function(event, scrollPositionY) {
                $("#rowHeader").scrollTop(scrollPositionY);
            }).bind('jsp-scroll-x',function(event, scrollPositionX) {
                $("#columnHeader").scrollLeft(scrollPositionX);
            }).jScrollPane();