CODEWITHSUNDEEP
jqueryjscrollpanejquery-jscrollpane
velozyrapthor
velozyrapthor

Reputation: 1

jQuery jScrollPane Synchronize Scroll

Is it possible to synchronize two scrolls?

Upvotes: 0

Views: 2734

Answers (5)

Yaron Meiner
Yaron Meiner

Reputation: 164

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

Upvotes: 0

velozyrapthor
velozyrapthor

Reputation: 1

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

Upvotes: 0

shitburg
shitburg

Reputation: 190

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();

Upvotes: 0

vitch
vitch

Reputation: 3214

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)

Upvotes: 0

Peter Olson
Peter Olson

Reputation: 142921

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();

Upvotes: 2

Related Questions