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