0

是否可以同步两个卷轴？

4

5 回答 5

2

将此函数添加到您的代码中：

  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();
于 2011-02-28T21:15:17.127 回答
0

jsp-scroll-y 通过绑定到事件然后调用scrollToYAPI 方法应该很容易做到这一点。

或者，由于 jScrollPane 还分派普通事件，因此您可以通过使用而不是和代替scroll来调整 Peter Of The Corn 的解决方案（同样适用于 left/top 属性）getContentPositionYscrollTop()scrollToYscrollTop(value)

于 2011-02-28T23:41:21.010 回答
0 
/* 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);
            }
        }
    )
于 2011-03-24T20:35:41.063 回答
0

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());
});
于 2011-10-27T06:13:31.340 回答
0

这是我的解决方案，它将制作一个粘性列和一个粘性行。设置溢出：隐藏在#rowHeader、#columnHeader

            $("#dataTable").bind('jsp-scroll-y', function(event, scrollPositionY) {
                $("#rowHeader").scrollTop(scrollPositionY);
            }).bind('jsp-scroll-x',function(event, scrollPositionX) {
                $("#columnHeader").scrollLeft(scrollPositionX);
            }).jScrollPane();
于 2011-09-17T01:06:56.823 回答