How to use jQuery jScrollPane and scrollTo plugins in the same script

I'm building my first 开发者_开发技巧js/jQuery site and I've run into a hiccup. I'm trying to use both jScrollpane (Kelvin Luck) and scrollTo (Ariel Flesler) plugins in one script. If I comment one out, the other works. Are they mutually exclusive? Do I need to unbind functionality out of jScrollpane to remove a 'scrollTo' call conflict or something? (I have no idea how to do that).

I'm using jScrollPane 2beta11 and scrollTo 1.4.2. Here's my stripped-down code using both:

// 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;
    });

});

I'm aware that jScrollPane has it's own scrollTo functionality, but I need scrollTo's jQuery Object selectors in my particular project. I know I've got my HTML/CSS lined up fine because each function works as long as the other is commented out.

(By the way, I plan on using "next" variable to increment scrollTo button once I figure out how... not related to my problem tho.)

Any help is much appreciated. Let me know if there's anything else I need to supply. Thanks!

-Patrick

See how to use ScrollTo functionality of JscrollPane from the following url,

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

Hope this will help you...

I too was trying to use both jScrollpane (Kelvin Luck) and scrollTo (Ariel Flesler) plugins in one script. I've come across an easy solution which doesn't even require Ariel Flesler's AWESOME Script, if you don't necessarily require animated scrolling. I wanted to be able to scroll to a label in a list of items when the page loads. Here's how i did it:

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

There's a small bug with the exact positioning when a list gets longer, will post a fix asap...

They are mutually exclusive because jScrollPane removes the real scrolling and replaces it with complex boxes-in-boxes being moved relative to each other via JS.

This is how I successfully mixed them -- I had a horizontal list of thumbnails; this code scrolled the thumbnails to the center:

Activated jScrollPane:

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

In my serialScroll code, where I usually would call

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

in my case, inside my

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

I put code like this:

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

Hope this helps someone out there!

This doesn't cater for all use cases (it only handles scrollToY and scrollToElement), but offers a consistent API so you can just use $( /* ... */ ).scrollTo( /* number or selector */ ) and it will work on any element, jScrollPane or native.

You could extend the method condition to cater for all the other jScrollPane methods by inferring the value passed in target though.

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