Question

看看有没有人遇到过这个问题。我们使用了非常棒的新jScrollPane和jQuery UI Draggable元素。我们在移动到jScrollPane时丢失的Draggable元素的一个很酷的功能是，当您在包含元素的边缘附近拖动时，它将滚动该元素（如果可能）。它不会与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不使用这些属性...

您可以在上面的模板之后添加额外的方法以进行可拖动。在拖动功能中，您可以使用API scrollBy方法而不是设置scrollTop或scrollLeft。

如果你设法使这个工作，请在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;
});

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

2 个答案: