如何在同一腳本中使用 jQuery jScrollPane 和 scrollTo 插件

Question

我正在構建我的第一個 js/jQuery 站點，但遇到了麻煩。 我正在嘗試在一個腳本中同時使用 jScrollpane (Kelvin Luck) 和 scrollTo (Ariel Flesler) 插件。 如果我將其中一個注釋掉，另一個將起作用。 它們是相互排斥的嗎？ 我是否需要從 jScrollpane 中取消綁定功能以刪除“scrollTo”調用沖突或其他什么？ （我不知道該怎么做）。

我正在使用 jScrollPane 2beta11 和 scrollTo 1.4.2。 這是我使用兩者的精簡代碼：

// JavaScript Document
$(document).ready(function() {

    //jScrollPane Init
    $('#scrollingDiv').jScrollPane({
    });

    //scrollTo Refresh
    $('div.scroll-pane').scrollTo( 0 );
    $.scrollTo( 0 );

    //Buttons
    var $scrollDiv = $('#scrollingDiv');
    var next = 1;

    $('#but-rt').click(function(){
    $scrollDiv.stop().scrollTo( 'li:eq(1)', 800 );
    next = next + 1;
    });

});

我知道 jScrollPane 有它自己的 scrollTo 功能，但我需要在我的特定項目中使用 scrollTo 的 jQuery Object 選擇器。 我知道我的 HTML/CSS 排列得很好，因為每個 function 只要另一個被注釋掉就可以工作。

（順便說一句，一旦我弄清楚如何......與我的問題無關，我計划使用“下一個”變量來增加 scrollTo 按鈕。）

任何幫助深表感謝。 讓我知道是否還有其他需要提供的東西。 謝謝！

-帕特里克

Answer 1

我也嘗試在一個腳本中同時使用 jScrollpane (Kelvin Luck) 和 scrollTo (Ariel Flesler) 插件。 如果您不一定需要動畫滾動，我遇到了一個簡單的解決方案，它甚至不需要 Ariel Flesler 的 AWESOME Script。 我希望能夠在頁面加載時滾動到項目列表中的 label。 我是這樣做的：

$(function()
    //Declare the ID or ClassName of the Scroll Element
    //and the ID or ClassName of the label to scroll to

    MyList = $('#MyElementID OR .MyElementClassName');
    MyLabel = $('#MyElementID OR .MyElementClassName');

    // Initiate the Scrollpane
    MyScroll = $(MyList).jScrollPane();

    // Connect to the jScrollPaneAPI
    jScrollPaneAPI = MyScroll.data('jsp');

    // Get position co-ordinates of the Label
    var MyLabelPosition = $(MyLabel).position();

    // Convert position co-ordinates to an Integer
    MyLabelPosition = Math.abs(MyLabelPosition.top);

    // Scroll to the Label (0-x, vertical scrolling) :)
    jScrollPaneAPI.scrollTo(0, MyLabelPosition-3, true);
});

當列表變長時，精確定位存在一個小錯誤，將盡快發布修復...

Answer 2

從以下 url 中了解如何使用 JscrollPane 的ScrollTo功能，

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

希望對你有幫助...

Answer 3

它們是互斥的，因為 jScrollPane 刪除了真正的滾動，並用復雜的盒中盒替換它，這些盒中盒通過 JS 相對於彼此移動。

這就是我成功混合它們的方式——我有一個水平的縮略圖列表； 此代碼將縮略圖滾動到中心：

激活 jScrollPane：

specialScrolling = $('#scrollingpart').jScrollPane();

在我通常會調用的 serialScroll 代碼中

$('#scrollingpart').trigger('goto', [pos]);

在我的情況下，在我的內部

onBefore:function(e, elem, $pane, $items, pos)

我把這樣的代碼：

jScrollPaneAPI = specialScrolling.data('jsp');
//get the api to manipulate the special scrolling are

scrollpos=(Math.abs(parseInt($('.jspPane').css('left'), 10)));
//get where we are currently scrolled -- since this is a negative number, 
//get the absolute value

var position = $('#scrollingpart .oneitem').eq(pos).position();
//get the relative offset location of the item we are targetting -- 
//note "pos" which is the index number for the items that you can access 
//in serialScroll's onBefore:function

itempos=Math.abs(position.left);
//get just the x-axis location -- your layout might be different

jScrollPaneAPI.scrollBy(itempos-scrollpos-480, 0, true);
//the 480 worked for my layout; the key is to subtract the 2 values as above

希望這可以幫助那里的人！

Answer 4

這並不適合所有用例（它只處理scrollToY和scrollToElement ），但提供了一致的 API 所以你可以只使用$( /*... */ ).scrollTo( /* number or selector */ )和它適用於任何元素， jScrollPane或本機。

您可以通過推斷在target中傳遞的值來擴展method條件以適應所有其他 jScrollPane 方法。

(function scrollPaneScrollTo(){
    // Save the original scrollTo function
    var $defaultScrollTo = $.fn.scrollTo;

    // Replace it with a wrapper which detects whether the element
    // is an instance of jScrollPane or not
    $.fn.scrollTo = function $scrollToWrapper( target ) {
        var $element = $( this ),
            jscroll  = $element.data( 'jsp' ),
            args     = [].slice.call( arguments, 0 ),
            method   = typeof target === 'number' ? 'scrollToY' : 'scrollToElement';

        if ( jscroll ) {
            return jscroll[ method ].call( $element, target, true );
        }
        else {
            return $defaultScrollTo.apply( $element, args );
        }
    };
}();