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 이벤트를 전달하기 때문에 당신이 (/ 위쪽 속성 왼쪽에 대해 마찬가지로와)

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

여기 대신 scrollTop()의 getContentPositionY 및 scrollToY를 사용하는 대신 scrollTop(value)에 의해 옥수수의 솔루션의 피터을 적용 할 수 끈적 끈적한 행을 만드는 나의 해결책과 끈적 끈적한 행. 오버플로 설정 : #rowHeader, #column 헤더에서 숨김

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