Wie man die jQuery UI schleppbar macht "auto scrolling" mit jScrollPane

Question

Nur sehen, ob jemand auf dieses Problem stieß. Wir verwenden den tollen neuen jScrollPane in Kombination mit dem jQuery UI Draggable-Element. Eine coole Eigenschaft des Draggable-Elements, die wir verloren haben, als wir uns zu jScrollPane bewegt haben, ist, dass wenn Sie in der Nähe der Kante des enthaltenen Elements ziehen, dieses Element nach Möglichkeit durchgeblättert wird. Mit jScrollPane geht das nicht. Hat jemand anderes versucht, das zu beheben?

Danke!

Answer 1

Leider dies auf einfache Art und Weise nicht möglich ist. Mit Blick auf den Code in jquery.ui.draggable.js, der relevante Teil ist:

$.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); 

    } 
}); 

Wie Sie sehen können, ist es direkt auf die scrollTop und scrollleft Eigenschaften des scrollParent manipuliert. Leider verwendet jScrollPane diese Eigenschaften nicht ...

Es ist möglich, dass Sie eine zusätzliche Methode zu ziehbarem hinzufügen können, die der Vorlage des obigen folgt. In der Ziehfunktion würden Sie anstelle von scrollTop oder scrollLeft die Methoden API scrollBy verwenden.

Wenn Sie es schaffen, dies funktioniert bitte das Plugin auf github Gabel und geben Sie eine Pull-Anfrage. Wenn Sie nicht denken, können Sie dann bitte open a feature request on github und ich werde versuchen, es zu implementieren, wenn ich etwas Freizeit habe.

Answer 2

Sie müssen jScrollPane erneut initialisieren, nachdem Sie jede Registerkarte angezeigt haben. Ein einfaches Beispiel hier:

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

In Ihrem Fall könnten Sie versuchen:

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