如何使jQuery UI可拖动“自动滚动”与jScrollPane

Question

只是看看是否有人遇到这个问题。我们使用jQuery UI Draggable元素结合了令人敬畏的新jScrollPane。 Draggable元素的一个很酷的特性，当我们移动到jScrollPane时丢失了这个特性，那就是当你拖动到包含元素的边缘附近时，它会在可能的情况下滚动这个元素。它不会使用jScrollPane。有没有人试图解决这个问题？

谢谢！

Answer 1

不幸的是，这是不可能以简单的方式。看着jquery.ui.draggable.js代码，相关部分是：

$.ui.plugin.add("draggable", "scroll", { 
    start: function(event, ui) { 
     var i = $(this).data("draggable"); 
     if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML') i.overflowOffset = i.scrollParent.offset(); 
    }, 
    drag: function(event, ui) { 

     var i = $(this).data("draggable"), o = i.options, scrolled = false; 

     if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML') { 

      if(!o.axis || o.axis != 'x') { 
       if((i.overflowOffset.top + i.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) 
        i.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop + o.scrollSpeed; 
       else if(event.pageY - i.overflowOffset.top < o.scrollSensitivity) 
        i.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop - o.scrollSpeed; 
      } 

      if(!o.axis || o.axis != 'y') { 
       if((i.overflowOffset.left + i.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) 
        i.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft + o.scrollSpeed; 
       else if(event.pageX - i.overflowOffset.left < o.scrollSensitivity) 
        i.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft - o.scrollSpeed; 
      } 

     } else { 

      if(!o.axis || o.axis != 'x') { 
       if(event.pageY - $(document).scrollTop() < o.scrollSensitivity) 
        scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed); 
       else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity) 
        scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed); 
      } 

      if(!o.axis || o.axis != 'y') { 
       if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity) 
        scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed); 
       else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity) 
        scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed); 
      } 

     } 

     if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) 
      $.ui.ddmanager.prepareOffsets(i, event); 

    } 
}); 

正如你所看到的，它直接操纵scrollParent的scrollTop的和scrollLeft属性。不幸的是，jScrollPane没有使用这些属性...

有可能你可以添加一个额外的方法到可拖动，遵循上面的模板。在拖动功能，而不是设置scrollTop或scrollLeft，你会使用API scrollBy方法。

如果你设法得到这个工作，请在github上插入插件并提交一个请求。如果你不认为你可以请open a feature request on github，当我有一些空闲时间时，我会尝试实施它。

Answer 2

您需要在显示每个选项卡后重新初始化jScrollPane。这里一个简单的例子：

http://jscrollpane.kelvinluck.com/invisibles.html

你的情况，你可以尝试：

$("ul.tabs li").click(function() { 

    $("ul.tabs li").removeClass("active"); //Remove any "active" class 
    $(this).addClass("active"); //Add "active" class to selected tab 
    $(".tab_content").hide(); //Hide all tab content 

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
    $(activeTab).fadeIn().jScrollPane(); //Fade in the active ID content and apply jScrollPane 
    return false; 
});