如何使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; 
});