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-y 事件应该很容易做到这一点，然后调用 scrollToY API 方法。

或者，由于 jScrollPane 还调度普通 scroll 事件，因此您可以使用 getContentPositionY 代替 scrollTop() 和 scrollToY 代替 scrollTop(value) (同样对于左/上属性）

Answer 3

这是我的解决方案，它将创建一个粘性列和一个粘性行。设置溢出：隐藏在 #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 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

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