jQuery jScrollPane同步滚动

Question

是否可以同步两个滚动条？

Answer 1

此功能添加到您的代码：

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

然后，你可以同步所有的滚动条元素中，像这样：

$(“jqueryselectorgoeshere”).synchronizeScroll(); 

Answer 2

这应该是很容易通过结合这样做到jsp-scroll-yevent，然后拨打scrollToY API method。

或者，因为JScrollPane中还调度平原scroll事件，你可以通过使用getContentPositionY代替scrollTop()和scrollToY代替scrollTop(value)（并且对于左/顶属性）

Answer 3

/* 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 4

这里的适应彼得玉米的解决方案我的解决方案将会制作一个粘滞的列，并且会产生一个粘性的行。设置溢出：隐藏在#rowHeader，#columnHeader

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

Answer 5

velozyrapthor的答案是正确的，并且正在工作。 我添加到我的代码中的唯一事情是'点击赛道'事件。 当你点击轨道时，它跳转到位置。

因为我的解决方案涉及到水平滚动条，我将事件更改为水平滚动条。

这是我的代码：

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