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 event然后调用scrollToY API method，这应该很容易实现。

或者，由于jScrollPane也会调度普通scroll事件，因此您可以使用getContentPositionY代替scrollTop()和scrollToY代替{{1}来修改Peter Of The Corn的解决方案（同样适用于左/顶属性）

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

jQuery jScrollPane同步滚动

5 个答案: